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

place-items қасиетінің қысқартпасын қолданып, Grid ішіндегі элементтерді бір уақытта екі ось бойынша туралауға болады. Қасиет бос орынмен бөлінген екі мәнді қабылдайды. Бірінші мәнмен біз элементтің орналасуын тік ось бойынша, ал екіншісімен - көлденең ось бойынша орнатамыз. Қасиет ата-ана элементте орнатылады.

Бұл қасиеттің жұмысын мысалдар арқылы қарастырайық.

Тік ось бойынша ортасына және көлденең ось бойынша басына

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

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

#parent {
	display: grid;
	place-items: end 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>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	place-items: start 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-тің көлденең осі бойынша басына және тік осі бойынша ортасына туралаңыз.

Енді Grid элементтерін үш бағанға орналастырыңыз және элементтерді Grid-тің көлденең осі бойынша ортасына және тік осі бойынша ортасына туралауды тағайындаңыз.

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