Grid Ausrichtung

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.

Steckbrief Grid Ausrichtung

Syntax: justify-items: start | center | end | stretch
Initialwert: (variiert je Eigenschaft)
Vererbt: Nein
Animierbar: Nein

Kategorie: Grid
Werte: 22
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

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:

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.
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.
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

22 Werte

justify-items / align-items

Wert	Beschreibung	Beispiel
`stretch`	Items füllen die gesamte Zelle aus (Standard für justify-items und align-items).	justify-items: stretch
`start`	Items werden am Anfang der Zelle ausgerichtet.	justify-items: start
`center`	Items werden in der Mitte der Zelle zentriert.	align-items: center
`end`	Items werden am Ende der Zelle ausgerichtet.	justify-items: end

justify-content / align-content

Wert	Beschreibung	Beispiel
`start`	Tracks werden am Anfang des Containers platziert.	justify-content: start
`center`	Tracks werden im Container zentriert.	justify-content: center
`end`	Tracks werden am Ende des Containers platziert.	justify-content: end
`stretch`	Tracks werden gestreckt, um den Container zu füllen.	justify-content: stretch
`space-between`	Gleicher Abstand zwischen den Tracks, kein Abstand am Rand.	justify-content: space-between
`space-around`	Gleicher Abstand um jeden Track, halber Abstand am Rand.	justify-content: space-around
`space-evenly`	Gleicher Abstand überall, auch am Rand.	justify-content: space-evenly

place-items / place-content (Shorthands)

Wert	Beschreibung	Beispiel
`<align> <justify>`	Erst align (Block-Achse), dann justify (Inline-Achse).	place-items: center start
`<value>`	Ein Wert wird für beide Achsen verwendet.	place-items: center

justify-self / align-self

Wert	Beschreibung	Beispiel
`auto`	Übernimmt den Wert von justify-items/align-items des Containers (Standard).	justify-self: auto
`start`	Item wird am Anfang der Zelle ausgerichtet.	justify-self: start
`center`	Item wird in der Mitte der Zelle zentriert.	justify-self: center
`end`	Item wird am Ende der Zelle ausgerichtet.	justify-self: end
`stretch`	Item wird gestreckt, um die Zelle zu füllen.	justify-self: stretch

gap, row-gap, column-gap

Wert	Beschreibung	Beispiel
`<length>`	Abstand zwischen allen Tracks.	gap: 16px
`<row-gap> <column-gap>`	Unterschiedliche Abstände für Zeilen und Spalten.	gap: 16px 8px
`row-gap`	Nur der Abstand zwischen Zeilen.	row-gap: 16px
`column-gap`	Nur der Abstand zwischen Spalten.	column-gap: 8px

Beispiele

5 Beispiele

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

justify-items und align-items

/* 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 verteilt die Spalten-Tracks innerhalb des Containers. Das ist nur sichtbar, wenn der Container breiter ist als die Tracks (z.B. bei festen Spaltenbreiten).

justify-content Varianten

.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 ist die kürzeste Art, Items vertikal und horizontal in ihren Zellen zu zentrieren. Ein Wert gilt für beide Achsen.

place-items: center

.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 überschreiben die Ausrichtung für ein einzelnes Item. Hier wird Item C anders ausgerichtet als die anderen.

justify-self und align-self

.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 definiert den Abstand zwischen Tracks. Mit zwei Werten setzt du unterschiedliche Abstände für Zeilen und Spalten.

gap mit verschiedenen Werten

/* 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

5 Fehler

01 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.

02 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.

03 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.

04 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.

05 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

Grundlegende Ausrichtung wird unterstützt
Gmail

Keine

Grid wird komplett ignoriert
Outlook

Keine

Kein Grid-Support, Tabellen-Layouts verwenden
Thunderbird

Teilweise

Grundlegende Ausrichtung wird unterstützt
Yahoo Mail

Keine

Kein Grid-Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da