Atskiro elemento lygiavimas abiejose CSS tinklelio ašyse

Galima lygiuoti atskirą elementą vienu metu ir horizontalioje, ir vertikalioje ašyse derinant savybes justify-self ir align-self.

Prie horizontalios pradžios ir vertikalios centro

Nustatykime mūsų pirmojo elemento lygiavimą prie horizontalios ir vertikalios ašių pradžios:

<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;
	align-self: center;
}

Prie horizontalios centro ir vertikalios pradžios

Dabar nustatykime pirmojo elemento lygiavimą prie horizontalios centro ir vertikalios pradžios:

<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;
	align-self: start;
}

Prie horizontalios pabaigos ir vertikalios centro

Nustatykime pirmojo elemento lygiavimą prie horizontalios pabaigos ir vertikalios centro:

<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;
	align-self: center;
}

Praktinės užduotys

Sukurkite tinklelį, susidedantį iš šešių elementų ir išdėstykite juos dviem eilutėmis. Atlikite antrojo elemento lygiavimą prie horizontalios pradžios ir vertikalios centro.

Dabar išdėstykite tinklelio elementus trimis eilutėmis ir nustatykite trečiojo elemento lygiavimą prie horizontalios centro ir vertikalios pabaigos.

Pakeiskite ankstesnę užduotį taip, kad ketvirtojo elemento lygiavimas vyktų prie horizontalios pabaigos ir vertikalios centro.

Dabar padarykite taip, kad penktojo elemento lygiavimas vyktų prie horizontalios pradžios ir vertikalios pradžios, o šeštojo elemento - prie horizontalios pabaigos ir vertikalios centro.