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

Амалий машқлар

Икки қаторда жойлашган олтта элементдан иборат грид яратинг. Элементларни гриднинг вертикал ўқи бошланиши бўйича текисланг.

Энди элементларни икки қаторда жойлаштиринг ва уларни гриднинг вертикал ўқи маркази бўйича текислашни белгиланг.

Олдинги машқни ўзгартиринг, элементларнинг текисланиши вертикал ўқнинг охири бўйича амалга оширилсин.