Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >justify-items

justify-items

justify-items: normal | stretch | start | end | center | baseline | legacy

Richtet alle Grid-Elemente auf der Inline-Achse (im Deutschen waagerecht) in ihren Zellen aus. Sie ist der Standardwert für das justify-self jedes Elements.

Werte

  • legacy – Standard; im Grid verhält es sich wie normal.
  • normal / stretch – ein Element ohne Breite füllt die ganze Breite der Zelle.
  • start / end – an den Anfang / das Ende der Zelle, das Element ist so breit wie sein Inhalt.
  • center – in die Mitte der Zelle.
  • Weitere Werte: left, right, self-start, self-end, baseline.

Initialwert: legacy. Vererbt: nein. Gilt für: alle Elemente (sichtbar im Grid).

Beispiele

Dasselbe Grid mit dem Standard-Dehnen und mit justify-items: center:

<div class="grid"><div>A</div><div>B</div><div>C</div></div>
<div class="grid center"><div>A</div><div>B</div><div>C</div></div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 300px;
  margin-bottom: 8px;
  padding: 6px;
  border: 2px dashed #999;
}
.grid div {
  padding: 4px 8px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.center { justify-items: center; }
Ergebnis
A
B
C
A
B
C

Worauf Sie achten sollten

  • In Flexbox wird sie ignoriert – die Elemente auf der Hauptachse verteilen justify-content und auto-Außenabstände.
  • Ein Element mit gesetzter width behält seine Breite auch bei stretch.
  • Der Wert legacy ist ein Überbleibsel alter Ausrichtung (<center>, align im HTML); im Grid bedeutet er dasselbe wie normal.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit Juli 2016, gilt als weithin verfügbar seit Januar 2019. Ab Version: Chrome 52, Firefox 20, Safari 9. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
justify-self
place-items
align-items
justify-content