Turinio lygiavimas išilgai horizontalios ašies CSS tinkle

Tinkle gali prireikti ne tik išdėstyti, bet ir lygiuoti turinį išilgai horizontalios tinkle ašies. Tokiu atveju mes naudojame savybę justify-content, kuri nurodoma pagrindiniame elemente. Pažiūrėkime pavyzdžiais, kaip veikia ši savybė.

Pagal ašies pradžią

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

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

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

Pagal ašies centrą

Dabar nustatykime mūsų elementų lygiavimą pagal horizontalios ašies centrą:

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

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

Pagal ašies pabaigą

Nustatykime mūsų elementų lygiavimą pagal horizontalios ašies pabaigą:

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

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

Praktinės užduotys

Sukurkite tinklelį, susidedantį iš šešių elementų, išdėstytų dviem stulpeliais. Atlikite elementų lygiavimą pagal horizontalios tinkle ašies pradžią.

Dabar išdėstykite tinklelio elementus trimis stulpeliais ir nustatykite elementų lygiavimą pagal horizontalios tinkle ašies centrą.

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