CSS Grid кеңістігінде жеке элементті көлденең ось бойынша туралау

Көлденең ось бойынша туралауды тек аталық элементте ғана емес, сонымен қатар әрбір бала элемент үшін бөлек орнатуға болады. Бұл мақсатта justify-self қасиеті қолданылады.

Көлденең осьтің басы бойынша

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

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

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

Көлденең осьтің ортасы бойынша

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

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

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

Көлденең осьтің соңы бойынша

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

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

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

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

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

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

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