Eigenschaft place-items

Die Eigenschaft place-items legt gleichzeitig die Ausrichtung von Spalten und Reihen fest, was unseren Code erheblich verkürzt. Mit dem ersten Wert legen wir die Positionierung des Elements entlang der vertikalen und mit dem zweiten entlang der horizontalen Achse fest. Die Eigenschaft place-items wird im übergeordneten Element definiert. Die Funktionsweise von place-items lässt sich bequem über den Browser-Debugger verfolgen.

Syntax

Selector {
	place-items: horizontaler Ausrichtungswert vertikaler Ausrichtungswert;
}

Beispiel . Ausrichtung an der vertikalen Mitte und am 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;
	place-items: center start;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Schauen wir uns unser Grid im Browser-Debugger an:

Beispiel . Ausrichtung am Ende der vertikalen und in der Mitte der horizontalen Achse

<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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Werfen wir nun einen Blick in die Debugger-Konsole:

Beispiel . Ausrichtung 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;
	place-items: start end;
	grid-template-columns: 100px 100px;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Schauen wir uns die Ausrichtung der Elemente in den Zellen mit dem Browser-Debugger an:

Siehe auch

die Eigenschaft justify-items,
die die Ausrichtung von Elementen innerhalb von Grid-Zellen entlang der horizontalen Achse festlegt
die Eigenschaft align-items,
die die Ausrichtung entlang der Querachse festlegt