Ausführbare CSS-Docs: CSS Grid

Q: Was bedeutet 1fr in CSS Grid?

fr ist ein Anteil am freien Platz im Grid-Container. grid-template-columns: 1fr 1fr 1fr ergibt drei gleich breite Spalten, und 1fr 2fr macht die zweite Spalte doppelt so breit wie die erste. Feste Größen und Lücken werden zuerst abgezogen; die fr-Spalten teilen sich, was übrig bleibt.

Q: Was ist der Unterschied zwischen auto-fill und auto-fit?

Beide erzeugen so viele Spalten, wie hineinpassen. auto-fill behält die leeren Spalten, also bleiben wenige Items schmal und lassen am Ende der Zeile leeren Platz. auto-fit fällt leere Spalten zusammen, und die Items strecken sich über die Zeile. Mit genug Items, um die Zeile zu füllen, sehen beide gleich aus.

Q: Wie lasse ich ein Grid-Item über zwei Spalten gehen?

Nimm grid-column: span 2 am Item oder gib ihm Start- und Endlinie: grid-column: 1 / 3 deckt die Spalten 1 und 2 ab. grid-column: 1 / -1 geht über die volle Breite, weil -1 die letzte Linie ist.

Q: Ist grid-gap dasselbe wie gap?

Ja. grid-gap, grid-row-gap und grid-column-gap sind die alten Namen. Browser akzeptieren sie weiterhin als Aliase, aber schreib gap, row-gap und column-gap, die auch in Flexbox funktionieren.

Ein Grid in drei Zeilen

Setz display: grid an einen Container und liste seine Spalten mit grid-template-columns auf. Die Kinder füllen die Zellen der Reihe nach, im Deutschen von links nach rechts, und eine neue Zeile beginnt, sobald die Spalten voll sind:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

Sieben Items, drei Spalten: zwei volle Zeilen und eine dritte Zeile mit Item 7 in der ersten Spalte. Jede Spalte ist gleich breit, und jedes Item in einer Zeile ist gleich hoch, also liegen die Kanten in beide Richtungen auf einer Linie. Genau das bringt Grid gegenüber Flexbox.

Grid-Playground

Tipp einen beliebigen Wert für grid-template-columns ein oder klick auf eine Vorlage. Die Anzeige zeigt die Spaltenbreiten, die der Browser berechnet hat (aus getComputedStyle), und wie viele Zeilen die Items gebraucht haben:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Was es zu sehen gibt: 1fr 2fr macht die zweite Spalte genau doppelt so breit wie die erste. 200px 1fr behält 200px und gibt den Rest der zweiten Spalte. auto 1fr auto passt die äußeren Spalten ihrem Inhalt an. repeat(4, 100px) lässt am Ende leeren Platz, weil nichts flexibel ist. Ein ungültiger Wert wie 1fr 2 wird ignoriert, und das Grid behält den letzten gültigen Wert.

Die Einheit fr

fr bedeutet „ein Anteil am freien Platz“. Der Browser zieht zuerst feste Spalten (px, rem, %, auto-Inhalt) und die Lücken ab und teilt dann den Rest entsprechend ihren Zahlen auf die fr-Spalten auf.

`grid-template-columns` in einem 600px-Container, ohne Lücke	Spaltenbreiten
`1fr 1fr 1fr`	200, 200, 200
`1fr 2fr`	200, 400
`100px 1fr 1fr`	100, 250, 250
`1fr 50%`	300, 300

fr ist nicht dasselbe wie %: Prozentwerte plus Lücken können zusammen mehr als 100% ergeben und überlaufen, während fr-Spalten sich immer nur teilen, was nach den Lücken übrig ist.

repeat(), minmax() und ein responsives Grid ohne Media Queries

repeat(4, 1fr) ist 1fr 1fr 1fr 1fr. minmax(120px, 1fr) ist eine Spalte, die nie schmaler als 120px wird und wächst, um einen Anteil zu nehmen. Kombinierst du sie mit auto-fill oder auto-fit anstelle einer Anzahl, erzeugt das Grid so viele Spalten, wie hineinpassen:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

Diese eine Deklaration ergibt so viele Spalten von mindestens 180px, wie in den Container passen: mehrere auf einem breiten Bildschirm, eine auf dem Handy, ohne Media Query. Den Unterschied zwischen auto-fill und auto-fit siehst du, wenn es weniger Items als Spalten gibt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

In den Container passen fünf Spalten à 100px. auto-fill behält alle fünf, also sind A, B und C je 112px breit, und zwei leere Spalten bleiben übrig. auto-fit fällt die leeren zusammen, und die drei Items strecken sich auf je etwa 187px.

Items platzieren: grid-column und grid-row

Grid-Linien werden ab 1 am Anfangsrand nummeriert. grid-column: 1 / 3 bedeutet „von Linie 1 bis Linie 3“, also zwei Spalten. span 2 bedeutet „zwei Spalten ab da, wo du landest“, und -1 ist die letzte Linie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

Das dunkle Item füllt die ganze erste Zeile. Das blaue deckt einen Block von 2 mal 2 ab, das bernsteinfarbene zwei Zeilen. Die Items a und b füllen die übrigen Zellen von selbst: Grid setzt jedes Item, das es kann, in die nächste freie Zelle. grid-auto-rows: 60px legt die Höhe von Zeilen fest, die du nicht mit grid-template-rows deklariert hast.

grid-template-areas: die Teile eines Layouts benennen

Für ein Seitenlayout benennst du die Bereiche und zeichnest sie als Text. Jeder String ist eine Zeile, jedes Wort eine Zelle, und ein Item tritt einem Bereich mit grid-area bei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Header und Footer gehen über beide Spalten, weil ihre Namen beide Zellen ihrer Zeilen füllen. Die mittlere Zeile ist 1fr und nimmt deshalb die Höhe, die von den 280px übrig bleibt. Um auf dem Handy alles zu stapeln, muss eine Media Query die Bereiche nur als eine Spalte neu zeichnen: grid-template-areas: "header" "side" "main" "footer" mit grid-template-columns: 1fr. Die Seite zu Media Queries zeigt das Muster.

Innerhalb der Zellen ausrichten

Grid-Items strecken sich standardmäßig über ihre Zelle. Diese Eigenschaften bewegen sie darin:

Eigenschaft	An	Bewegt
`justify-items`	Container	jedes Item entlang der Zeile (Inline-Achse)
`align-items`	Container	jedes Item hoch und runter (Block-Achse)
`place-items`	Container	Kurzschreibweise: `place-items: center` zentriert in beide Richtungen
`justify-self` / `align-self`	Item	ein einzelnes Item
`justify-content` / `align-content`	Container	die ganze Menge der Spuren, wenn das Grid kleiner als der Container ist

display: grid; place-items: center; ist der kürzeste Weg, ein Kind in einer Box zu zentrieren.

Grid oder Flexbox

Grid ist zweidimensional: Du legst die Spalten (und Zeilen) fest, und der Inhalt füllt sie, also hat jede Karte in einer Galerie dieselbe Breite, sogar in der letzten Zeile. Flexbox ist eindimensional: Items bekommen ihre Größe aus dem Inhalt entlang einer einzigen Linie. Beide lassen sich gut kombinieren: ein Grid für die Seite und die Kartengalerie, Flexbox in jeder Karte für ihre Kopfzeile. Die Seite zu Flexbox behandelt die andere Hälfte.

Reihenfolge und Barrierefreiheit

grid-template-areas, grid-row, grid-column und order können ein Item überall hinsetzen, aber Screenreader und die Tab-Taste folgen weiterhin der HTML-Reihenfolge. Halte die Reihenfolge im Quelltext sinnvoll (Header, Navigation, Hauptinhalt, Footer) und nutze Grid, um sie anzuordnen, nicht, um eine unsinnige HTML-Reihenfolge zu reparieren.

Häufige Fehler

display: grid an die Items setzen. Es gehört ans Elternelement; nur direkte Kinder sind Grid-Items.
Prozentwerte mit Lücken verwenden. grid-template-columns: 50% 50% plus gap: 16px läuft um 16px über. Nimm 1fr 1fr.
auto-fill, obwohl du auto-fit wolltest. Mit wenigen Items lässt auto-fill leere Spalten stehen. Wechsle zu auto-fit, um die Items zu strecken.
Eine 1fr-Spalte, die über ihren Anteil hinauswächst. Eine 1fr-Spalte schrumpft nicht unter ihren längsten Inhalt (eine lange URL, ein breites Bild). Nimm minmax(0, 1fr), damit sie schrumpfen kann.
Bereichs-Strings, die keine Rechtecke bilden. Jeder benannte Bereich muss ein Rechteck bilden, und jeder Zeilen-String braucht dieselbe Anzahl Zellen, sonst wird die ganze Deklaration grid-template-areas ignoriert.
Vergessen, dass Liniennummern bei 1 beginnen. Drei Spalten haben vier Linien: 1 / 4 oder 1 / -1 geht über alle drei.

Häufig gestellte Fragen

Was ist CSS Grid?

Ein Layout-System, das Elemente gleichzeitig in Zeilen und Spalten platziert. Du setzt display: grid an einen Container, beschreibst seine Spalten mit grid-template-columns (und optional seine Zeilen), und seine direkten Kinder füllen die Zellen der Reihe nach.

Was bedeutet 1fr in CSS Grid?

fr ist ein Anteil am freien Platz im Grid-Container. grid-template-columns: 1fr 1fr 1fr ergibt drei gleich breite Spalten, und 1fr 2fr macht die zweite Spalte doppelt so breit wie die erste. Feste Größen und Lücken werden zuerst abgezogen; die fr-Spalten teilen sich, was übrig bleibt.

Was ist der Unterschied zwischen auto-fill und auto-fit?

Beide erzeugen so viele Spalten, wie hineinpassen. auto-fill behält die leeren Spalten, also bleiben wenige Items schmal und lassen am Ende der Zeile leeren Platz. auto-fit fällt leere Spalten zusammen, und die Items strecken sich über die Zeile. Mit genug Items, um die Zeile zu füllen, sehen beide gleich aus.

Wie lasse ich ein Grid-Item über zwei Spalten gehen?

Nimm grid-column: span 2 am Item oder gib ihm Start- und Endlinie: grid-column: 1 / 3 deckt die Spalten 1 und 2 ab. grid-column: 1 / -1 geht über die volle Breite, weil -1 die letzte Linie ist.

Wann nehme ich Grid statt Flexbox?

Nimm Grid, wenn Zeilen und Spalten aneinander ausgerichtet sein müssen: Kartengalerien, Formulare mit ausgerichteten Labels, eine Seite mit Header, Seitenleiste und Footer. Nimm Flexbox für eine einzelne Zeile oder Spalte, deren Items ihre Größe aus dem Inhalt bekommen, etwa eine Navigationsleiste.

Ist grid-gap dasselbe wie gap?

Ja. grid-gap, grid-row-gap und grid-column-gap sind die alten Namen. Browser akzeptieren sie weiterhin als Aliase, aber schreib gap, row-gap und column-gap, die auch in Flexbox funktionieren.

Verwandte Konzepte