Sutrumpinimas lygiavimui išilgai abiejų ašių CSS gardelės langeliuose

Naudojant sutrumpintąją savybę place-items galima vienu metu lygiuoti elementus gardelės langeliuose išilgai abiejų ašių. Savybė priima dvi reikšmes, atskirtas tarpu. Pirmąja reikšme nustatome elemento padėtį išilgai vertikaliosios, o antraja - išilgai horizontaliosios ašies. Savybė nustatoma tėvinio elemento lygmenyje.

Pažiūrėkime, kaip ši savybė veikia pavyzdžiuose.

Vertikaliai centre ir horizontaliai pradžioje

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 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;
}

Pažiūrėkime į mūsų gardelę naršyklės žvalgyklėje:

Vertikaliai pabaigoje ir horizontaliai centre

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

#parent {
	display: grid;
	place-items: end center;
	grid-template-columns: 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;
}

Pažiūrėkime į mūsų gardelę naršyklės žvalgyklėje:

Vertikaliai pradžioje ir horizontaliai pabaigoje

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

#parent {
	display: grid;
	place-items: start end;
	grid-template-columns: 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;
}

Pažiūrėkime į mūsų gardelę naršyklės žvalgyklėje:

Praktinės užduotys

Sukurkite gardelę, susidedančią iš šešių elementų ir išdėstykite juos dviejuose stulpeliuose. Atlikite elementų lygiavimą horizontaliosios ašies pradžioje ir vertikaliosios ašies centre.

Dabar išdėstykite gardelės elementus triuose stulpeliuose ir nustatykite elementų lygiavimą horizontaliosios ašies centre ir vertikaliosios ašies centre.

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