Grid Ausrichtung

Zuletzt aktualisiert am 15. Februar 2026

Grid bietet ein umfassendes Ausrichtungssystem auf drei Ebenen: Items innerhalb ihrer Zellen, Tracks innerhalb des Containers und einzelne Items unabhängig von den anderen. In diesem Artikel lernst du alle Ausrichtungseigenschaften kennen: justify-items und align-items für Zellen, justify-content und align-content für Tracks, justify-self und align-self für Einzelfälle, sowie gap für Abstände.

Grundlagen

Die Ausrichtung in Grid folgt zwei Achsen: Die Inline-Achse (horizontal bei LTR-Sprachen) wird mit justify-* gesteuert, die Block-Achse (vertikal) mit align-*. Das ist einfacher als bei Flexbox, weil die Achsen bei Grid nicht wechseln.

Es gibt drei Ebenen der Ausrichtung:

1. Items in Zellen (justify-items / align-items): Wie werden Items innerhalb ihrer Grid-Zelle positioniert? Standard ist stretch, die Items füllen die gesamte Zelle.
2. Tracks im Container (justify-content / align-content): Wie werden die Grid-Tracks (Spalten/Zeilen) innerhalb des Containers verteilt? Nur relevant, wenn der Container größer ist als die Tracks.
3. Einzelnes Item (justify-self / align-self): Überschreibt die Ausrichtung für ein einzelnes Item.

Die place-* Shorthands kombinieren jeweils align-* und justify-* in einer Deklaration. Die Reihenfolge ist immer: erst align, dann justify (block-axis zuerst).

Grid verwendet start und end (nicht flex-start und flex-end wie Flexbox). gap funktioniert identisch wie bei Flexbox.

Syntax & Werte

justify-items / align-items

justify-content / align-content

place-items / place-content (Shorthands)

justify-self / align-self

gap, row-gap, column-gap

Beispiele

justify-items und align-items

justify-items richtet Items horizontal in ihrer Zelle aus, align-items vertikal. Standard ist stretch (Items füllen die Zelle).

/* Items füllen die Zelle (Standard) */
.stretch { justify-items: stretch; align-items: stretch; }

/* Items oben links */
.start { justify-items: start; align-items: start; }

/* Items zentriert */
.center { justify-items: center; align-items: center; }

/* Items unten rechts */
.end { justify-items: end; align-items: end; }

<div class="demo">
<div class="example">
  <div class="example-label">stretch (Standard)</div>
  <div class="grid-stretch">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
</div>
<div class="example">
  <div class="example-label">start</div>
  <div class="grid-start">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
</div>
<div class="example">
  <div class="example-label">center</div>
  <div class="grid-center">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
</div>
<div class="example">
  <div class="example-label">end</div>
  <div class="grid-end">
    <div class="item">A</div>
    <div class="item">B</div>
  </div>
</div>
</div>

justify-content: Tracks im Container verteilen

justify-content verteilt die Spalten-Tracks innerhalb des Containers. Das ist nur sichtbar, wenn der Container breiter ist als die Tracks (z.B. bei festen Spaltenbreiten).

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px;
  /* Container ist breiter als 3 × 60px */
}

.start   { justify-content: start; }
.center  { justify-content: center; }
.between { justify-content: space-between; }
.evenly  { justify-content: space-evenly; }

<div class="demo">
<div class="label">justify-content: start</div>
<div class="grid-jc jc-start">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="label">justify-content: center</div>
<div class="grid-jc jc-center">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="label">justify-content: space-between</div>
<div class="grid-jc jc-between">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="label">justify-content: space-evenly</div>
<div class="grid-jc jc-evenly">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
</div>

place-items: center

place-items: center ist die kürzeste Art, Items vertikal und horizontal in ihren Zellen zu zentrieren. Ein Wert gilt für beide Achsen.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 80px;
  place-items: center;
  gap: 8px;
}

/* Entspricht: */
/* align-items: center; */
/* justify-items: center; */

<div class="demo">
<div class="grid-place">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>
</div>

justify-self und align-self

justify-self und align-self überschreiben die Ausrichtung für ein einzelnes Item. Hier wird Item C anders ausgerichtet als die anderen.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 70px;
  /* Alle Items: stretch (Standard) */
}

.special {
  justify-self: center;  /* Nur dieses Item horizontal zentriert */
  align-self: end;       /* Nur dieses Item vertikal am Ende */
}

<div class="demo">
<div class="grid-self">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item special">C (center/end)</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>
</div>

gap mit verschiedenen Werten

gap definiert den Abstand zwischen Tracks. Mit zwei Werten setzt du unterschiedliche Abstände für Zeilen und Spalten.

/* Gleicher Abstand überall */
.equal { gap: 16px; }

/* Unterschiedlich: 24px Zeilen, 8px Spalten */
.different { gap: 24px 8px; }

/* Entspricht: */
/* row-gap: 24px; */
/* column-gap: 8px; */

<div class="demo">
<div class="example">
  <div class="example-label">gap: 16px (gleich)</div>
  <div class="grid-gap-equal">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</div>
<div class="example">
  <div class="example-label">gap: 24px 8px (Zeilen / Spalten)</div>
  <div class="grid-gap-diff">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</div>
</div>

Barrierefreiheit

Ausrichtungseigenschaften wie justify-items, align-items oder place-items verschieben Items nur visuell innerhalb ihrer Zellen. Sie ändern weder die Tab-Reihenfolge noch die Lesereihenfolge für Screenreader. Das bedeutet: Im Gegensatz zu grid-column oder grid-row sind diese Eigenschaften aus Barrierefreiheitssicht unbedenklich.

Die einzige Ausnahme: Wenn du align-self oder justify-self verwendest, um ein interaktives Element (z.B. einen Button) visuell weit von seinem logischen Kontext zu entfernen, kann das verwirrend sein. Der Button bleibt aber in der Tab-Reihenfolge an seiner logischen Position, was gut ist.

Häufige Fehler

• start/end vs. flex-start/flex-end: In Grid heißen die Werte start und end. flex-start und flex-end funktionieren nur in Flexbox. Der Browser akzeptiert sie zwar in Grid, aber es ist nicht die korrekte Schreibweise.
• content vs. items verwechseln: justify-content verteilt die Tracks (Spalten) im Container. justify-items richtet die Items in ihren Zellen aus. Wenn du die Zentrierung der Items meinst, willst du justify-items, nicht justify-content.
• justify-content ohne Effekt: Wenn die Spalten mit fr-Einheiten definiert sind, füllen die Tracks automatisch den gesamten Container. justify-content hat dann keinen sichtbaren Effekt, weil kein Platz übrig ist. Verwende feste Breiten, um den Effekt zu sehen.
• place-items Reihenfolge: place-items: center start bedeutet align-items: center (Block-Achse) und justify-items: start (Inline-Achse). Die Block-Achse kommt zuerst. Wer justify zuerst erwartet, setzt die Werte vertauscht.
• align-self ohne sichtbaren Effekt: Wenn die Zeilenhöhe genau dem Inhalt entspricht (auto), hat align-self keinen sichtbaren Effekt, weil es keinen überschüssigen Platz gibt. Setze eine feste Zeilenhöhe oder grid-auto-rows, um die Auswirkung zu sehen.

Browser-Kompatibilität

Alle Grid-Ausrichtungseigenschaften werden von allen modernen Browsern vollständig unterstützt.

Email-Kompatibilität

Grid-Ausrichtung hat in HTML-Emails sehr eingeschränkten Support. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Verwandte Eigenschaften