Ausrichtung des Inhalts entlang der horizontalen Achse im CSS-Grid

Im Grid kann es nicht nur notwendig sein, Elemente zu platzieren, sondern auch den Inhalt entlang der horizontalen Achse des Grids auszurichten. In diesem Fall verwenden wir die Eigenschaft justify-content, die im übergeordneten Element definiert wird. Sehen wir uns an Beispielen an, wie diese Eigenschaft funktioniert.

Am Anfang der Achse

Setzen wir die Ausrichtung für unsere Elemente auf den Anfang der horizontalen Achse:

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

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

In der Mitte der Achse

Setzen wir nun die Ausrichtung für unsere Elemente auf die Mitte der horizontalen Achse:

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

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

Am Ende der Achse

Setzen wir die Ausrichtung für unsere Elemente auf das Ende der horizontalen Achse:

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

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

Praktische Aufgaben

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

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

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