Ausrichtung innerhalb von CSS-Grid-Zellen entlang der vertikalen Achse

Für die Ausrichtung von Elementen innerhalb von Grid-Zellen entlang der vertikalen Achse verwenden wir die Eigenschaft align-items, die im Elternelement gesetzt wird. Die Wirkung dieser Eigenschaft kann beim Betrachten des Grids im Browser- Debugger gesehen werden.

Am Anfang der Achse

Lassen Sie uns unsere Elemente innerhalb der Zellen am Anfang der vertikalen Achse ausrichten:

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

Betrachten wir unser Grid im Browser-Debugger:

In der Mitte der Achse

Richten wir nun unsere Elemente in den Zellen in der Mitte der vertikalen Achse aus:

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

Betrachten wir unser Grid im Browser-Debugger:

Am Ende der Achse

Ändern wir erneut die Ausrichtung der Elemente, dieses Mal am Ende der vertikalen Achse:

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

Betrachten wir unser Grid im Browser-Debugger:

Praktische Aufgaben

Erstellen Sie ein Grid, das aus sechs Elementen besteht, die in zwei Spalten angeordnet sind. Führen Sie die Ausrichtung der Elemente innerhalb der Zellen am Anfang der vertikalen Achse durch.

Ordnen Sie nun die Elemente des Grids in drei Spalten an und legen Sie die Ausrichtung der Elemente in den Zellen in der Mitte der vertikalen Grid-Achse fest.

Ändern Sie die vorherige Aufgabe so, dass die Ausrichtung der Elemente am Ende der vertikalen Achse erfolgt.