Grid Platzierung

Zuletzt aktualisiert am 15. Februar 2026

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.

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

grid-column-start / grid-column-end

grid-row-start / grid-row-end

grid-column (Shorthand)

grid-row (Shorthand)

Beispiele

Items an Grid-Linien platzieren

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

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

Das span-Schlüsselwort

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.

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

Negative Liniennummern

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

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

Überlappende Items mit z-index

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

.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

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

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

Email-Kompatibilität

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

Verwandte Eigenschaften