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

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

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

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

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

#parent {
	display: grid;
	align-content: 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-content: 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>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-content: 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;
}

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

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

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

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