Kurzschreibweise für die Ausrichtung innerhalb von Zellen entlang beider Achsen in CSS Grid

Mit der Kurzschreibweise place-items können Elemente innerhalb von Grid-Zellen gleichzeitig entlang beider Achsen ausgerichtet werden. Die Eigenschaft akzeptiert zwei Werte, getrennt durch ein Leerzeichen. Mit dem ersten Wert legen wir die Positionierung des Elements entlang der vertikalen Achse fest, mit dem zweiten entlang der horizontalen Achse. Die Eigenschaft wird im übergeordneten Element definiert.

Lassen Sie uns die Funktionsweise dieser Eigenschaft anhand von Beispielen betrachten.

Mittig vertikal und am Anfang horizontal

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

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

Am Ende vertikal und mittig horizontal

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

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

Am Anfang vertikal und am Ende horizontal

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

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

Betrachten wir unser Grid im Browser-Inspektor:

Praktische Aufgaben

Erstellen Sie ein Grid, das aus sechs Elementen besteht und ordnen Sie diese in zwei Spalten an. Führen Sie die Ausrichtung der Elemente am Anfang der horizontalen und in der Mitte der vertikalen Achse des Grids durch.

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

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