Lygiuotė CSS gardelės langelių viduje išilgai horizontalios ašies

Elementų lygiavimui gardelės languose, t.y., srityse, atsirandančiose susikertant stulpeliams ir eilėms, naudojama justify-items savybė, kuri nustatoma tėvinio elemento lygmenyje. Lygiavimą aiškiausiai galima pastebėti naršyklės žvalgyklėje peržiūrint gardelę.

Prieš ašies pradžią

Lyginkime savo elementus langelių viduje prieš 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-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Dabar pažiūrėkime į mūsų gardelę žvalgyklėje:

Pagal ašies centrą

Lyginkime savo elementus langelių viduje 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-items: 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;
}

Dabar pažiūrėkime į mūsų gardelę žvalgyklėje:

Pagal ašies pabaigą

Lyginkime savo elementus langelių viduje 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-items: 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;
}

Dabar pažiūrėkime į mūsų gardelę žvalgyklėje:

Praktinės užduotys

Sukurkite gardelę, susidedančią iš penkių elementų, išdėstytų trimis eilėmis. Atlikite elementų lygiavimą išilgai horizontalios ašies.

Dabar išdėstykite gardelės elementus dviem eilėmis ir nustatykite elementų lygiavimą langelių viduje pagal horizontalios ašies centrą.

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