Ausrichtung des Inhalts entlang beider Achsen im CSS-Grid

Oft im Grid kann es erforderlich sein, den Inhalt gleichzeitig entlang der horizontalen und vertikalen Achsen des Grids auszurichten. Zu diesem Zweck können wir gemeinsam die beiden Eigenschaften verwenden, die Sie in der vorherigen Lektion kennengelernt haben: justify-content und align-content.

Am Anfang der vertikalen und am Ende der horizontalen Achse

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

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

Am Ende der vertikalen und am Anfang der horizontalen Achse

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

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

In der Mitte der vertikalen Achse und horizontalen Achse

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

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

Praktische Aufgaben

Erstellen Sie ein Grid, das aus sechs Elementen besteht, und ordnen Sie sie in zwei Spalten an. Führen Sie die Ausrichtung der Elemente am Anfang der horizontalen und in der Mitte der vertikalen Achsen 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 und am Ende der vertikalen Achsen des Grids.

Ändern Sie die vorherige Aufgabe, so dass die Ausrichtung der Elemente am Ende der horizontalen und in der Mitte der vertikalen Achsen des Grids erfolgt.