ცალკეული ელემენტის გასასწორებელი შემოკლება CSS გრიდში
შესაძლებელია ერთდროულად გასწორება ცალკეული ელემენტის
როგორც ჰორიზონტალურად, ასევე ვერტიკალურად.
ამისთვის გამოიყენება თვისება place-self.
ის იღებს ორ მნიშვნელობას სივრცით გამოყოფილს.
პირველი მნიშვნელობა განსაზღვრავს გასწორებას
ვერტიკალურად, ხოლო მეორე - ჰორიზონტალურად.
მოდით შევხედოთ მაგალითებს.
ვერტიკალურად ცენტრში და ჰორიზონტალურად დასაწყისში
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
ვერტიკალურად დასაწყისში და ჰორიზონტალურად დასასრულში
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
ვერტიკალურად დასასრულში და ჰორიზონტალურად ცენტრში
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
პრაქტიკული ამოცანები
შექმენით გრიდი, რომელიც შედგება ხუთი ელემენტისგან და განათავსეთ ისინი სამ რიგში. შეასრულეთ პირველი ელემენტის გასწორება ჰორიზონტალური ღერძის დასაწყისში და ვერტიკალური ღერძის ცენტრში.
შეცვალეთ წინა ამოცანა ისე, რომ მესამე ელემენტის გასწორება მოხდეს ჰორიზონტალური ღერძის დასასრულში და ვერტიკალური ღერძის ცენტრში.
ახლა განათავსეთ ელემენტები გრიდის ორ რიგში და მიუთითეთ მეხუთე ელემენტის გასწორება ჰორიზონტალური ღერძის ცენტრში და ვერტიკალური ღერძის დასასრულში.
გახადეთ ისე, რომ მეორე ელემენტი იყოს გასწორებული ჰორიზონტალური ღერძის დასაწყისში და ვერტიკალური ღერძის დასასრულში, ხოლო მეოთხე ელემენტი - ჰორიზონტალური ღერძის ცენტრში და ვერტიკალური ღერძის დასაწყისში.
