Atsevišķa elementa izlīdzināšana pa vertikālo asi CSS režģī

Līdzīgā veidā var izlīdzināt elementus pa vertikālo asi, izmantojot īpašību align-self. Apskatīsim ar piemēriem, kā tas darbojas.

Pa vertikālās ass sākumu

Iestatīsim pirmā elementa izlīdzināšanu pa vertikālās ass sākumu:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

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

Pa vertikālās ass centru

Iestatīsim pirmā elementa izlīdzināšanu pa vertikālās ass centru:

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

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

Pa vertikālās ass beigām

Iestatīsim mūsu pirmā elementa izlīdzināšanu režģī pa vertikālās ass beigām:

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

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

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no pieciem elementiem, kas izvietoti divās kolonnās. Veiciet trešā elementa izlīdzināšanu pa režģa vertikālās ass sākumu.

Tagad izvietojiet režģa elementus trīs kolonnās un iestatiet otrā elementa izlīdzināšanu pa režģa vertikālās ass centru.

Mainiet iepriekšējo uzdevumu tā, lai ceturtā un piektā elementa izlīdzināšana notiktu attiecīgi pa vertikālās ass beigām un sākumu.