place-items

Die CSS-Eigenschaft place-items ist eine Kurzschreibweise für die Eigenschaften align-items und justify-items und fasst sie in einer einzigen Deklaration zusammen.

Eine häufige Anwendung ist die horizontale und vertikale Zentrierung mit Grid

.center-inside-of-me {
  display: grid;
  place-items: center;
}

Diese Eigenschaften wurden mit der Einführung von Flexbox und Grid-Layouts immer wichtiger, werden aber auch für

• Block-Level-Boxen
• Absolut positionierte Boxen
• Statische Position von absolut positionierten Boxen
• Tabellenzellen

Syntax

Die Eigenschaft akzeptiert zwei Werte, der erste für align-items und der zweite für justify-items. Zur Erinnerung: align-items richtet Inhalte entlang der vertikalen (Spalten-)Achse aus, während justify-items entlang der horizontalen (Zeilen-)Achse ausrichtet.

.item {
  display: grid;
  place-items: start center;
}

Das ist dasselbe wie:

.item {
  display: grid;
  align-items: start;
  justify-items: center;
}

Wenn nur ein Wert angegeben wird, setzt dieser beide Eigenschaften. Zum Beispiel dieser

.item {
  display: grid;
  place-items: start;
}

…ist dasselbe wie dieser

.item {
  display: grid;
  align-items: start;
  justify-items: start;
}

Akzeptierte Werte

Was diese Eigenschaft interessant macht, ist, dass sie sich je nach Kontext, in dem sie verwendet wird, unterschiedlich verhält. Einige Werte gelten beispielsweise nur für Flexbox und funktionieren nicht in einem Grid-Setup. Zusätzlich gelten einige Werte für die Eigenschaft align-items, während andere für die Seite justify-items gelten.

Darüber hinaus können die Werte selbst als in eine Reihe von Ausrichtungstypen fallend betrachtet werden: kontextuell, Distribution, positional (was zu self-positional wird, wenn es direkt auf ein Kind-Element im Layout angewendet wird) und baseline.

Rachel Andrew hat ein ausgezeichnetes Box Alignment Cheat Sheet, das hilft, die Wirkung der Werte zu veranschaulichen.

Wert	Typ	Beschreibung
auto	Kontextuell	Der Wert passt sich entsprechend dem Kontext des Elements an. Er verwendet den justify-items-Wert des Elternelements. Wenn kein Elternelement vorhanden ist oder er auf ein Element angewendet wird, das mit absolute positioniert ist, wird der Wert zu normal.
normal	Kontextuell	Nimmt das Standardverhalten des Layoutkontextes an, in dem es angewendet wird. • Block-Level-Layouts: start • Absolute Positionierung: start für ersetzte absolute Elemente und stretch für alle anderen • Tabellenlayouts: Wert wird ignoriert • Flexbox-Layouts: Wert wird ignoriert • Grid-Layouts: stretch, es sei denn, ein Seitenverhältnis oder intrinsische Größenangabe wird verwendet, wo es sich wie start verhält
stretch	Distribution	Erweitert das Element vertikal für align-items und horizontal für justify-items zu beiden Kanten des Containers.
start	Positional	Alle Elemente werden aneinander am Anfangs (linken) Rand des Containers ausgerichtet
end	Positional	Alle Elemente werden aneinander am Ende (rechten) Rand des Containers ausgerichtet
center	Positional	Die Elemente werden nebeneinander zur Mitte des Containers ausgerichtet
left	Positional	Die Elemente werden nebeneinander zum linken Rand des Containers ausgerichtet. Wenn die Eigenschaft nicht parallel zu einer Standard-Achse oben, rechts, unten, links verläuft, verhält sie sich wie end.
right	Positional	Die Elemente werden nebeneinander zum rechten Rand des Containers ausgerichtet. Wenn die Eigenschaft nicht parallel zu einer Standard-Achse oben, rechts, unten, links verläuft, verhält sie sich wie start.
flex-start	Positional	Ein nur für Flexbox gültiger Wert (der auf start zurückfällt), bei dem Elemente zum Anfangsrand des Containers gepackt werden.
flex-end	Positional	Ein nur für Flexbox gültiger Wert (der auf end zurückfällt), bei dem Elemente zum Endrand des Containers gepackt werden.
self-start	Self-Positional	Ermöglicht es einem Element in einem Layout, sich am Container-Rand basierend auf seiner eigenen Startseite auszurichten. Überschreibt im Grunde den auf dem Elternteil gesetzten Wert.
self-end	Self-Positional	Ermöglicht es einem Element in einem Layout, sich am Container-Rand basierend auf seiner eigenen Endseite auszurichten, anstatt den Positions-Wert des Containers zu erben. Überschreibt im Grunde den auf dem Elternteil gesetzten Wert.
first baseline last baseline	Baseline	Richtet alle Elemente innerhalb einer Gruppe (z.B. Zellen innerhalb einer Zeile) aus, indem ihre Ausrichtungs-Baselines abgeglichen werden. Standardmäßig first, wenn baseline allein verwendet wird.

Browser-Unterstützung

Diese Eigenschaft ist im CSS Box Alignment Model Level 3 enthalten.

Browserunterstützung ist ziemlich breit und stabil

• Edge 79+ (post-Chromium)
• Firefox 45+
• Chrome 59+
• Safari 11+

Referenzen

• CSS Box Alignment Model Level 3 – Die offizielle Spezifikation, in der die Eigenschaft place-items ursprünglich definiert wurde.
• Mozilla Developer Network – Die Dokumentation des Mozilla-Teams.
• Box Alignment Cheat Sheet – Rachelandrews Übersicht ist eine äußerst hilfreiche Ressource, um Ausrichtungsterme und ihre Definitionen zu verstehen.

Verwandte Eigenschaften