Atskiro elemento lygiavimas horizontalioje CSS tinklelio ašyje

Lygiavimą horizontalioje ašyje galima nustatyti ne tik pagrindiniame elemente, bet ir kiekvienam paveldui atskirai. Šiam tikslui naudojama savybė justify-self.

Pagal horizontalios ašies pradžią

Nustatykime mūsų pirmojo elemento lygiavimą pagal horizontalios ašies pradžią:

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

Pagal horizontalios ašies centrą

Nustatykime pirmojo elemento lygiavimą pagal horizontalios ašies centrą:

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

Pagal horizontalios ašies pabaigą

Nustatykime pirmojo elemento lygiavimą pagal horizontalios ašies pabaigą:

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

Praktinės užduotys

Sukurkite tinklelį, susidedantį iš penkių elementų, išdėstytų dviem eilėmis. Atlikite antro elemento lygiavimą pagal horizontalios ašies pradžią.

Dabar išdėstykite tinklelio elementus trimis eilėmis ir nustatykite trečio elemento lygiavimą pagal tinklelio horizontalios ašies centrą.

Pakeiskite ankstesnę užduotį taip, kad penkto elemento lygiavimas vyktų pagal horizontalios ašies pabaigą.