CSS tinklelio langelių išlygiavimas vertikalia ašimi

Elementų išlygiavimui tinklelio languose vertikalia ašimi mes naudojame savybę align-items, kuri nustatoma pagrindiniame elemente. Šios savybės veikimą galima pamatyti peržiūrint tinklelį naršyklės derintuve.

Prieš ašies pradžią

Išlyginkime savo elementus languose prieš vertikalios 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;
	align-items: 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;
}

Pažiūrėkime į mūsų tinklelį naršyklės derintuve:

Pagal ašies centrą

O dabar išlyginkime mūsų elementus languose pagal vertikalios 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;
	align-items: 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ų tinklelį naršyklės derintuve:

Prieš ašies pabaigą

Vėl pakeiskime elementų išlygiavimą, šį kartą prieš vertikalios ašies pabaigą:

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Pažiūrėkime į mūsų tinklelį naršyklės derintuve:

Praktinės užduotys

Sukurkite tinklelį, susidedantį iš šešių elementų, išdėstytų dviem stulpeliais. Atlikite elementų išlygiavimą languose prieš vertikalios ašies pradžią.

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

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