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

Für die Ausrichtung von Elementen innerhalb von Grid-Zellen, d.h. der Bereiche, die durch den Schnittpunkt von Spalten und Reihen entstehen, wird die Eigenschaft justify-items verwendet, die im übergeordneten Element definiert wird. Die Ausrichtung ist am deutlichsten sichtbar, wenn man das Grid im Browser-Debugger betrachtet.

Zum Anfang der Achse

Lassen Sie uns unsere Elemente innerhalb der Zellen zum Anfang der horizontalen Achse ausrichten:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Schauen wir uns nun unser Grid im Debugger an:

Zur Mitte der Achse

Lassen Sie uns unsere Elemente in den Zellen zur Mitte der horizontalen Achse ausrichten:

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

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

Schauen wir uns nun unser Grid im Debugger an:

Zum Ende der Achse

Lassen Sie uns unsere Elemente zum Ende der horizontalen Achse ausrichten:

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

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

Schauen wir uns nun unser Grid im Debugger an:

Praktische Aufgaben

Erstellen Sie ein Grid, das aus fünf Elementen besteht, die über drei Reihen angeordnet sind. Führen Sie die Ausrichtung der Elemente entlang der horizontalen Achse durch.

Ordnen Sie nun die Elemente des Grids in zwei Reihen an und legen Sie die Ausrichtung der Elemente in den Zellen zur Mitte der horizontalen Achse fest.

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