Ausrichtung eines einzelnen Elements entlang der vertikalen Achse im CSS-Grid

In ähnlicher Weise können Elemente entlang der vertikalen Achse mit der Eigenschaft align-self ausgerichtet werden. Lassen Sie uns anhand von Beispielen sehen, wie das funktioniert.

Am Anfang der vertikalen Achse

Lassen Sie uns die Ausrichtung für das erste Element am Anfang der vertikalen Achse setzen:

<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;
}

In der Mitte der vertikalen Achse

Lassen Sie uns die Ausrichtung des ersten Elements in der Mitte der vertikalen Achse setzen:

<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;
}

Am Ende der vertikalen Achse

Lassen Sie uns die Ausrichtung für unser erstes Element im Grid am Ende der vertikalen Achse setzen:

<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;
}

Praktische Aufgaben

Erstellen Sie ein Grid, das aus fünf Elementen besteht, die in zwei Spalten angeordnet sind. Führen Sie die Ausrichtung des dritten Elements am Anfang der vertikalen Achse des Grids durch.

Ordnen Sie nun die Elemente des Grids in drei Spalten an und setzen Sie die Ausrichtung des zweiten Elements in die Mitte der vertikalen Achse des Grids.

Ändern Sie die vorherige Aufgabe, so dass die Ausrichtung des vierten und fünften Elements am Ende bzw. am Anfang der vertikalen Achse erfolgt.