Grid Platzierung

Mit grid-column und grid-row platzierst du Grid-Items gezielt an bestimmten Positionen im Raster. Statt die automatische Reihenfolge zu nutzen, gibst du an, an welcher Linie ein Item beginnen und enden soll. Das ermöglicht Layouts, die mit automatischer Platzierung nicht möglich wären: Items über mehrere Spalten spannen, Positionen überspringen oder sogar Elemente übereinander legen.

Steckbrief Grid Platzierung

Syntax: grid-column: <start> / <end>
Initialwert: auto
Vererbt: Nein
Animierbar: Nein

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

Grundlagen

Grid-Linien sind die unsichtbaren Linien zwischen und um die Tracks (Spalten und Zeilen). Bei einem Grid mit 3 Spalten gibt es 4 vertikale Linien, nummeriert von 1 bis 4. Die Linien beginnen bei 1, nicht bei 0.

Du kannst Linien auch von rechts zählen: -1 ist die letzte Linie, -2 die vorletzte. Das ist praktisch, wenn du ein Item über die gesamte Breite spannen willst (1 / -1), ohne die genaue Spaltenanzahl zu kennen.

Wenn du ein Item explizit platzierst, wird es aus dem normalen Fluss herausgenommen. Die restlichen Items füllen die übrigen Zellen in der automatischen Reihenfolge. Das bedeutet auch: Explizit platzierte Items können sich überlappen. In diesem Fall bestimmt z-index (oder die Quelltext-Reihenfolge), welches Item oben liegt.

Syntax & Werte

14 Werte

grid-column-start / grid-column-end

Wert	Beschreibung	Beispiel
`<line-number>`	Liniennummer, an der das Item startet bzw. endet.	grid-column-start: 2
`span <n>`	Das Item erstreckt sich über n Spalten ab der Startposition.	grid-column-start: span 2
`<negative>`	Zählt von der letzten Linie rückwärts. -1 ist die letzte Linie.	grid-column-end: -1
`auto`	Automatische Platzierung durch den Browser (Standard).	grid-column-start: auto

grid-row-start / grid-row-end

Wert	Beschreibung	Beispiel
`<line-number>`	Liniennummer, an der das Item startet bzw. endet.	grid-row-start: 1
`span <n>`	Das Item erstreckt sich über n Zeilen.	grid-row-end: span 2
`<negative>`	Zählt von der letzten Linie rückwärts.	grid-row-end: -1
`auto`	Automatische Platzierung (Standard).	grid-row-start: auto

grid-column (Shorthand)

Wert	Beschreibung	Beispiel
`<start> / <end>`	Start- und End-Linie, getrennt durch Schrägstrich.	grid-column: 1 / 3
`<start> / span <n>`	Startlinie und Anzahl der überspannten Spalten.	grid-column: 2 / span 2
`<start>`	Nur die Startlinie. Das Item belegt eine Spalte.	grid-column: 2

grid-row (Shorthand)

Wert	Beschreibung	Beispiel
`<start> / <end>`	Start- und End-Linie, getrennt durch Schrägstrich.	grid-row: 1 / 3
`<start> / span <n>`	Startlinie und Anzahl der überspannten Zeilen.	grid-row: 1 / span 2
`<start>`	Nur die Startlinie. Das Item belegt eine Zeile.	grid-row: 1

Beispiele

4 Beispiele

Das hervorgehobene Item (“Feature”) wird explizit über 2 Spalten platziert. Die restlichen Items füllen die übrigen Zellen automatisch.

Item über 2 Spalten

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.feature {
  grid-column: 1 / 3; /* Von Linie 1 bis Linie 3 = 2 Spalten */
}

<div class="demo">
<div class="grid-lines">
  <div class="item feature">Feature (Spalte 1-2)</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
</div>
</div>

span ist eine Alternative zu festen Liniennummern. Statt 1 / 3 schreibst du span 2. Das Item erstreckt sich über 2 Spalten ab seiner automatischen Position.

span-Schlüsselwort

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.wide { grid-column: span 2; }   /* 2 Spalten breit */
.wider { grid-column: span 3; }  /* 3 Spalten breit */

<div class="demo">
<div class="grid-span">
  <div class="item span-2">span 2</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item span-3">span 3</div>
  <div class="item">Item</div>
</div>
</div>

-1 ist die letzte Linie, -2 die vorletzte. grid-column: 1 / -1 bedeutet: von der ersten bis zur letzten Linie, also über alle Spalten.

Negative Liniennummern

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* Volle Breite */
.full { grid-column: 1 / -1; }

/* Die letzten 2 Spalten */
.last-two { grid-column: -3 / -1; }

<div class="demo">
<div class="grid-neg">
  <div class="item full-width">1 / -1 (volle Breite)</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item last-two">-3 / -1 (letzte 2)</div>
</div>
</div>

Explizit platzierte Items können sich überlappen. z-index bestimmt, welches oben liegt.

Überlappende Items

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 60px 60px;
  gap: 8px;
}

.box-a { grid-column: 1 / 4; grid-row: 1; z-index: 1; }
.box-b { grid-column: 2 / 5; grid-row: 1 / 3; z-index: 2; }
.box-c { grid-column: 1 / 3; grid-row: 2; z-index: 1; }

<div class="demo">
<div class="grid-overlap">
  <div class="item box-a">A (z-index: 1)</div>
  <div class="item box-b">B (z-index: 2)</div>
  <div class="item box-c">C (z-index: 1)</div>
</div>
</div>

Barrierefreiheit

Mit grid-column und grid-row kannst du Items an beliebige Positionen im Raster setzen, unabhängig von ihrer Position im HTML. Das ist mächtig, aber gefährlich: Die visuelle Reihenfolge entspricht dann nicht mehr der DOM-Reihenfolge, und genau die ist entscheidend für Screenreader und Tastaturnavigation (WCAG 1.3.2).

Besonders problematisch wird es bei interaktiven Elementen. Wenn du einen Button visuell an Position 1 platzierst (grid-column: 1), er aber im HTML als letztes Element steht, wird er auch als letztes fokussiert. Für Tastaturnutzer ist das verwirrend: Sie sehen den Button oben, müssen aber durch alle anderen Elemente tabben, bevor sie ihn erreichen.

Best Practice: Verwende explizite Platzierung nur für nicht-interaktive Elemente (Bilder, Hintergründe) oder wenn die DOM-Reihenfolge sowieso stimmt. Für Formulare, Navigation und andere interaktive Inhalte sollte die visuelle Reihenfolge die DOM-Reihenfolge widerspiegeln. Teste dein Layout mit der Tab-Taste, um unerwartete Fokussprünge zu finden.

Häufige Fehler

5 Fehler

01 Off-by-one bei Liniennummern

Ein Grid mit 3 Spalten hat 4 Linien (1, 2, 3, 4). grid-column: 1 / 3 belegt 2 Spalten, nicht 3. Die End-Linie ist exklusiv.

02 span auf beiden Seiten

grid-column: span 2 / span 3 ist ungültig. Du kannst span nur auf einer Seite des Schrägstrichs verwenden, auf der anderen muss eine Liniennummer oder auto stehen.

03 Überlappung ohne z-index

Wenn sich Items überlappen und kein z-index gesetzt ist, bestimmt die Quelltext-Reihenfolge, welches oben liegt. Das ist schwer vorhersehbar. Setze immer explizit z-index.

04 Negative Linien nur bei explizitem Grid

-1 funktioniert nur, wenn das Grid explizit mit grid-template-columns definiert ist. Bei impliziten Spalten (z.B. durch grid-auto-columns) gibt es keine negative Linie.

05 Grid-Lines vs. Grid-Tracks verwechseln

Eine “Spalte” ist der Bereich zwischen zwei Linien (ein Track). Die Linien selbst sind nur die Grenzen. grid-column: 2 bedeutet “starte an Linie 2”, nicht “gehe in die zweite Spalte”.

Browser-Kompatibilität

5 von 5

Grid-Platzierung wird von allen modernen Browsern vollständig unterstützt. Alle Werte inklusive span und negative Liniennummern funktionieren zuverlässig.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

Grid-Platzierung 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 Platzierung wird unterstützt
Gmail

Keine

Grid wird komplett ignoriert
Outlook

Keine

Kein Grid-Support, Tabellen-Layouts verwenden
Thunderbird

Teilweise

Grundlegende Platzierung 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