Turinio lygiavimas abiejose ašyse CSS tinkle

Dažnai tinkle gali prireikti vienu metu išlyginti turinį išilgai horizontaliosios ir vertikaliosios tinkle ašių. Šiam tikslui galime kartu naudoti dvi savybes, apžvelgtas jums ankstesnėje pamokoje: justify-content ir align-content.

Pagal vertikaliosios pradžią ir horizontaliosios pabaigą

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

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

Pagal vertikaliosios pabaigą ir horizontaliosios pradžią

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

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

Pagal vertikaliosios ašies centrą ir horizontaliosią

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

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

Praktinės užduotys

Sukurkite tinklelį, susidedantį iš šešių elementų ir išdėstykite juos į du stulpelius. Atlikite elementų lygiavimą pagal horizontaliosios pradžią ir vertikaliosios ašių tinklelio centrą.

Dabar išdėstykite tinklelio elementus į tris stulpelius ir nustatykite elementų lygiavimą pagal horizontaliosios centrą ir vertikaliosios ašių tinklelio pabaigą.

Pakeiskite ankstesnę užduotį, kad elementų lygiavimas vyktų pagal horizontaliosios pabaigą ir vertikaliosios ašių tinklelio centrą.