CSS grid-тегінің көлденең осі бойынша мазмұнды туралау

Grid-те тек орналастыру ғана емес, сонымен қатар мазмұнды grid көлденең осі бойынша туралау қажет болуы мүмкін. Бұл жағдайда біз justify-content қасиетін қолданамыз, ол ата-элементте орнатылады. Бұл қасиеттің қалай жұмыс істейтінін мысалдармен қарастырайық.

Ось басы бойынша

Элементтеріміз үшін көлденең ось басы бойынша туралауды орнатайық:

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

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

Ось ортасы бойынша

Енді элементтеріміз үшін көлденең ось ортасы бойынша туралауды орнатайық:

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

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

Ось соңы бойынша

Элементтеріміз үшін көлденең ось соңы бойынша туралауды орнатайық:

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

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

Практикалық тапсырмалар

Екі бағанда орналасқан алты элементтен тұратын grid жасаңыз. Элементтерді grid көлденең осінің басы бойынша туралаңыз.

Енді элементтерді үш бағанда орналастырып, оларды grid көлденең осінің ортасы бойынша туралаңыз.

Алдыңғы тапсырманы элементтердің туралауы көлденең ось соңы бойынша орындалатындай етіп өзгертіңіз.