Ausrichtung entlang beider Achsen innerhalb von CSS-Grid-Zellen

Man kann gleichzeitig die Ausrichtung von Elementen innerhalb von Grid-Zellen sowohl entlang der horizontalen als auch der vertikalen Achse festlegen. Zu diesem Zweck können wir die beiden Eigenschaften justify-items und align-items kombinieren, die im übergeordneten Element festgelegt werden.

Zentriert entlang der Achsen

Lassen Sie uns unsere Elemente entlang der horizontalen und vertikalen Achsen zentrieren:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Sehen wir uns nun unser Grid im Browser-Developer-Tool an:

Am Anfang der horizontalen und am Ende der vertikalen Achse

Lassen Sie uns unsere Elemente in den Zellen am Anfang der horizontalen und am Ende der vertikalen Achse positionieren:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Sehen wir uns nun unser Grid im Browser-Developer-Tool an:

Am Ende der horizontalen und am Anfang der vertikalen Achse

Lassen Sie uns unsere Elemente in den Zellen am Ende der horizontalen und am Anfang der vertikalen Achse positionieren:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Sehen wir uns nun unser Grid im Browser-Developer-Tool an:

Praktische Aufgaben

Erstellen Sie ein Grid, das aus fünf Elementen besteht, die in drei Reihen angeordnet sind. Führen Sie die Ausrichtung der Elemente in den Zellen am Anfang der horizontalen und in der Mitte der vertikalen Achse durch.

Ordnen Sie nun die Elemente des Grids in zwei Reihen an und legen Sie die Ausrichtung der Elemente innerhalb der Zellen in der Mitte der horizontalen und am Anfang der vertikalen Achse fest.

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