CSS Gridda kontentni vertikal o‘q bo‘yicha joylash

Grid kontentini vertikal o‘q bo‘yicha joylash uchun biz ota-elementda belgilanadigan align-content xususiyatidan foydalanamiz.

O‘q boshiga qarab

Keling, grid elementlarimiz uchun vertikal o‘q boshiga joylashni belgilaymiz:

<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;
}

O‘q markaziga qarab

Endi esa elementlarni vertikal o‘q markaziga joylashni belgilaymiz:

<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;
}

O‘q oxiriga qarab

Keling, elementlarni vertikal o‘q oxiriga joylashni belgilaymiz:

<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;
}

Amaliy mashqlar

Ikkita qatordan iborat oltita elementli grid yarating. Elementlarni grid vertikal o‘qi boshiga joylashtiring.

Endi elementlarni ikkita qatorda joylashtiring va elementlarni grid vertikal o‘qi markaziga joylashni belgilang.

Oldingi mashqni o‘zgartiring, elementlar joylashuvi grid vertikal o‘qi oxiriga bo‘lsin.