CSS place-items Eigenschaft - Syntax, Werte, Beispiele.

Die CSS-Eigenschaft place-items ist eine Kurzschreibweise, die zwei Ausrichtungseigenschaften auf einmal setzt:

align-items — Ausrichtung entlang der Block-Achse (bei einem Standard-Layout die vertikale/Spaltenrichtung).
justify-items — Ausrichtung entlang der Inline-Achse (bei einem Standard-Layout die horizontale/Zeilenrichtung).

Anstatt beide Eigenschaften einzeln zu schreiben, genügt eine einzige place-items-Deklaration. Dies ist besonders nützlich bei Grid-Layouts, wo es steuert, wie jedes Element innerhalb seiner eigenen Rasterzelle positioniert wird (die Standardausrichtung, die auf jedes Element angewendet wird – gleichwertig mit dem Setzen von place-self auf jedem einzelnen Element).

Diese Seite behandelt die Syntax, die Ein- und Zwei-Wert-Formen, jeden Wert mit seiner tatsächlichen Wirkung sowie die Layouts, in denen place-items keine Auswirkung hat.

Wann wird place-items angewendet?

place-items hat nur in Layouts eine Wirkung, die ein Konzept von „Elementen" kennen:

Grid-Layouts — der Hauptanwendungsfall. Es richtet jedes Element innerhalb seines Rasterbereichs aus.
Absolut positionierte Boxen — es richtet die Box innerhalb ihres umgebenden Blocks aus.

In folgenden Fällen wird es ignoriert, was eine häufige Fehlerquelle ist:

Flexbox-Layouts — justify-items (und damit die Inline-Hälfte von place-items) hat in Flexbox keine Wirkung. Verwenden Sie stattdessen justify-content und align-items direkt.
Standardmäßige Block-Level-Boxen.
Tabellenzellen.

Info

place-items verhält sich je nach Layout-Kontext unterschiedlich — derselbe Wert kann in Grid und absoluter Positionierung unterschiedliche Bedeutungen haben. Die Wertetabelle unten erläutert jeden Fall.

Anfangswert	normal legacy
Gilt für	Alle Elemente.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.placeItems = "normal";

Syntax

place-items: <align-items> <justify-items>?;

Die akzeptierten Schlüsselwörter sind:

place-items: auto | normal | start | end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;

Es gibt zwei Formen:

Ein Wert — er setzt beide Achsen. place-items: center; bedeutet „vertikal und horizontal zentrieren."
Zwei Werte — der erste setzt align-items (Block-Achse), der zweite setzt justify-items (Inline-Achse). Zum Beispiel bedeutet place-items: start end; „oben vertikal, rechts horizontal."

Info

Die CSS Grid-Spezifikation trennt die beiden Werte durch ein Leerzeichen (place-items: start end), nicht durch einen Schrägstrich. In älterem Material ist möglicherweise noch ein Schrägstrich zu sehen; ein einzelner Wert ist die sicherste und am weitesten unterstützte Form.

Beispiel — einzelner Wert (`start`)

Ein einzelnes Schlüsselwort richtet Elemente auf beiden Achsen gleichzeitig aus. Hier verschiebt start das Element in die obere linke Ecke seiner Rasterzelle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: start;
        background-color: #ccc;
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 1px solid #666;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #1c87c9;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items property example</h2>
    <h3>place-items: start</h3>
    <div id="container">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel — zwei Werte (`end start`)

Mit zwei Schlüsselwörtern können Sie jede Achse unabhängig steuern. Hier verschiebt end start das Element nach unten (Block-Achse) und nach links (Inline-Achse):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        height: 150px;
        width: 150px;
        place-items: end start;
        background-color: #ccc;
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 1px solid #666;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #8ebf42;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>place-items: end start</h2>
    <div id="container">
      <div id="box1">1</div>
    </div>
  </body>
</html>

Beispiel — `center`-Wert

Ein einzelnes center-Schlüsselwort zentriert jedes Element sowohl vertikal als auch horizontal innerhalb seiner Rasterzelle:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      #container {
        height: 200px;
        width: 230px;
        place-items: center;
        background-color: #ccc;
        display: grid;
      }
      .grid {
        display: grid;
      }
      div > div {
        box-sizing: border-box;
        border: 3px solid #ccc;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #box1 {
        background-color: #666;
        min-height: 40px;
      }
      #box2 {
        background-color: #1c87c9;
        min-height: 50px;
      }
      #box3 {
        background-color: #fff;
        min-height: 40px;
      }
      #box4 {
        background-color: #ff0000;
        min-height: 60px;
      }
      #box5 {
        background-color: #eee;
        min-height: 70px;
      }
      #box6 {
        background-color: #8ebf42;
        min-height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Place-items property example</h2>
    <div id="container" class="grid">
      <div id="box1">1</div>
      <div id="box2">2</div>
      <div id="box3">3</div>
      <div id="box4">4</div>
      <div id="box5">5</div>
      <div id="box6">6</div>
    </div>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung
auto	Hat die Box kein übergeordnetes Element oder ist sie absolut positioniert, entspricht der Wert „auto" dem Wert „normal".
normal	Die Wirkung dieses Werts hängt vom Layout-Modus ab: - In Block-Level-Layouts verhält sich „normal" wie „start". - In absolut positionierten Layouts verhält sich dieser Wert wie „start" bei ersetzen absolut positionierten Boxen und wie „stretch" bei allen anderen absolut positionierten Boxen. - In Tabellenzellen-Layouts wird diese Eigenschaft ignoriert. - In Flexbox-Layouts wird diese Eigenschaft ignoriert. - In Grid-Layouts verhält sich dieser Wert wie „stretch", außer bei Boxen mit einem Seitenverhältnis oder intrinsischen Größen, wo er sich wie „start" verhält.
start	Richtet das Element an der Startkante seines Rasterbereichs aus (oben auf der Block-Achse, links auf der Inline-Achse in einem Links-nach-Rechts-Layout).
end	Richtet das Element an der Endkante seines Rasterbereichs aus (unten auf der Block-Achse, rechts auf der Inline-Achse in einem Links-nach-Rechts-Layout).
self-start	Das Element darf sich basierend auf seiner eigenen Startseite an der Containerkante positionieren.
self-end	Das Element darf sich basierend auf seiner eigenen Endseite an der Containerkante positionieren.
center	Elemente werden nebeneinander zur Mitte des Containers hin positioniert.
left	Elemente werden nebeneinander zur linken Seite des Containers hin platziert. Ist die Achse der Eigenschaft nicht parallel zur Inline-Achse, verhält sich dieser Wert wie „end".
right	Elemente werden nebeneinander zur rechten Seite des Containers hin platziert. Ist die Achse der Eigenschaft nicht parallel zur Inline-Achse, verhält sich dieser Wert wie „start".
baseline	Richtet alle Elemente innerhalb einer Gruppe aus, indem ihre Ausrichtungsbaselines aneinander ausgerichtet werden.
first baseline	Richtet die erste Baseline des Elements an der ersten Baseline der Zeile aus.
last baseline	Richtet die letzte Baseline des Elements an der letzten Baseline der Zeile aus.
stretch	Dehnt das Element auf beide Kanten des Containers vertikal und horizontal aus, um in den Container zu passen.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Was macht die CSS-Eigenschaft 'place-items'?

Sie legt das Standard-justify-self und align-self für alle Elemente der Box fest.Sie ändert die Farbe aller Elemente in der Box.Sie steuert den Abstand zwischen CSS-Rasterzellen.Sie fasst zwei separate Eigenschaften zu einer Kurzschreibweise zusammen.Sie legt den z-index für alle Elemente der Box fest.

Wann wird place-items angewendet?

Syntax

Beispiel — einzelner Wert (start)

Ergebnis

Beispiel — zwei Werte (end start)

Beispiel — center-Wert

Werte

Verwandte Eigenschaften

Übungen

Beispiel — einzelner Wert (`start`)

Beispiel — zwei Werte (`end start`)

Beispiel — `center`-Wert