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

Grid ұяшықтарының ішіндегі элементтерді тік ось бойынша туралау үшін біз элемент-родительте орнатылатын align-items қасиетін қолданамыз. Бұл қасиеттің жұмысын браузердің жөндеу құралында grid-ті қарап көру арқылы көруге болады.

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

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

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

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

Grid-імізді браузердің жөндеу құралында қарап көрейік:

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

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

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

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

Grid-імізді браузердің жөндеу құралында қарап көрейік:

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

Элементтердің туралануын тағы да өзгертейік, бұл жолы тік осьтің соңы бойынша:

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

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

Grid-імізді браузердің жөндеу құралында қарап көрейік:

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

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

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

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