CSS Grid ішіндегі мазмұнды тік ось бойынша туралау

Grid ішіндегі мазмұнды тік ось бойынша туралау үшін біз ата-элементте орнатылатын align-content қасиетін қолданамыз.

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

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

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

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

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

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

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