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

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

ღერძის დასაწყისში

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

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 100px 100px;
	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;
}

მოდით შევხედოთ ჩვენს ღრიდს ბრაუზერის დებაგერში:

ღერძის ცენტრში

ახლა კი ჩვენი ელემენტები უჯრებში ვერტიკალური ღერძის ცენტრში გავასწოროთ:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: center;
	grid-template-columns: 100px 100px;
	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;
}

მოდით შევხედოთ ჩვენს ღრიდს ბრაუზერის დებაგერში:

ღერძის დასასრულში

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

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: end;
	grid-template-columns: 100px 100px;
	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 {
	
}

მოდით შევხედოთ ჩვენს ღრიდს ბრაუზერის დებაგერში:

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

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

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

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