Lygiuotė abiejose ašyse CSS gardelės langeliuose

Galima vienu metu nustatyti elementų lygiuotę gardelės langeliuose ir horizontalioje, ir vertikalioje ašyse. Šiam tikslui galime sujungti dvi savybes justify-items ir align-items, kurios nustatomos tėvinio elemento lygmenyje.

Abiejų ašių centre

Išlyginkime savo elementus horizontaliosios ir vertikaliosios ašių centre:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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ę naršyklės žvalgyklėje:

Horizontaliosios pradžioje ir vertikaliosios pabaigoje

Išdėstykime savo elementus gardelės langeliuose horizontaliosios ašies pradžioje ir vertikaliosios ašies pabaigoje:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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ę naršyklės žvalgyklėje:

Horizontaliosios pabaigoje ir vertikaliosios pradžioje

Išdėstykime savo elementus gardelės langeliuose horizontaliosios ašies pabaigoje ir vertikaliosios ašies pradžioje:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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ę naršyklės žvalgyklėje:

Praktinės užduotys

Sukurkite gardelę, susidedančią iš penkių elementų, išdėstytų trimis eilutėmis. Atlikite elementų lygiavimą langeliuose horizontaliosios ašies pradžioje ir vertikaliosios ašies centre.

Dabar išdėstykite gardelės elementus dviem eilutėmis ir nustatykite elementų lygiavimą langeliuose horizontaliosios ašies centre ir vertikaliosios ašies pradžioje.

Pakeiskite ankstesnę užduotį taip, kad elementų lygiavimas vyktų horizontaliosios ašies pabaigoje ir vertikaliosios ašies centre.