ცალკეული ელემენტის ვერტიკალური ღერძის გასწვრივ გასწორება CSS Grid-ში

ანალოგიურად შესაძლებელია ელემენტების გასწორება ვერტიკალური ღერძის გასწვრივ align-self თვისების გამოყენებით. მაგალითებით ვნახოთ, როგორ მუშაობს ეს.

ვერტიკალური ღერძის დასაწყისში

დავაყენოთ გასწორება პირველი ელემენტისთვის ვერტიკალური ღერძის დასაწყისში:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">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 {
	align-self: 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 {
	align-self: center;
}

ვერტიკალური ღერძის დასასრულში

დავაყენოთ გასწორება ჩვენი პირველი ელემენტისთვის ღერიდში ვერტიკალური ღერძის დასასრულში:

<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 {
	align-self: end;
}

პრაქტიკული ამოცანები

შექმენით ღერიდი, რომელიც შედგება ხუთი ელემენტისგან, განლაგებული ორ სვეტში. შეასრულეთ მესამე ელემენტის გასწორება ღერიდის ვერტიკალური ღერძის დასაწყისში.

ახლა განათავსეთ ღერიდის ელემენტები სამ სვეტში და დააყენეთ მეორე ელემენტის გასწორება ღერიდის ვერტიკალური ღერძის ცენტრში.

შეცვალეთ წინა ამოცანა ისე, რომ მეოთხე და მეხუთე ელემენტების გასწორება მოხდეს ვერტიკალური ღერძის დასასრულსა და დასაწყისში შესაბამისად.