CSS grid Kurzschreibweise — Vollständiger Leitfaden

Die CSS-Eigenschaft grid ist eine Kurzschreibweise, mit der Sie ein gesamtes CSS Grid-Layout in einer einzigen Deklaration definieren können. Sie setzt die folgenden sechs Untereigenschaften gleichzeitig am Grid-Container:

grid-template-rows — Höhen der expliziten Zeilen
grid-template-columns — Breiten der expliziten Spalten
grid-template-areas — benannte Bereiche des Layouts
grid-auto-rows — Höhe implizit erstellter Zeilen
grid-auto-columns — Breite implizit erstellter Spalten
grid-auto-flow — Richtung, in der automatisch platzierte Elemente eingefügt werden

Die Eigenschaft grid gilt nur für einen Grid-Container — ein Element mit display: grid oder display: inline-grid.

Wichtig: Jede Untereigenschaft, die Sie in einer grid-Deklaration nicht angeben, wird auf ihren Anfangswert zurückgesetzt. Dies ist der wesentliche Unterschied zum einzelnen Setzen von Untereigenschaften — grid beginnt immer mit einem sauberen Ausgangszustand.

Explizite vs. implizite Tracks

Das Verständnis dieses Unterschieds ist der Schlüssel zum Lesen jedes grid-Werts:

Explizite Tracks sind die Zeilen und Spalten, die Sie manuell definieren. Das / im Wert trennt Zeilen (links) von Spalten (rechts): grid: 100px 200px / 1fr 1fr bedeutet zwei explizite Zeilen und zwei explizite Spalten.
Implizite Tracks sind zusätzliche Zeilen oder Spalten, die der Browser automatisch erstellt, wenn mehr Elemente vorhanden sind als das explizite Grid aufnehmen kann. grid-auto-rows / grid-auto-columns legen ihre Größen fest, und grid-auto-flow entscheidet, ob der Überlauf in neue Zeilen (Standard) oder neue Spalten fließt.

Sie können in einer einzigen grid-Kurzschreibweise entweder die expliziten Eigenschaften oder die impliziten angeben — nicht beides gleichzeitig.

Die `fr`-Einheit

Grid-Layouts verwenden häufig fr (Brucheinheit). 1fr bedeutet „ein Anteil des verfügbaren Platzes". Drei Spalten, die als 1fr 1fr 1fr definiert sind, erhalten je ein Drittel der Container-Breite. Sie können fr auch mit festen Größen kombinieren: 200px 1fr gibt der ersten Spalte 200 px und der zweiten Spalte den gesamten verbleibenden Platz.

Syntax

/* Keyword */
grid: none;

/* Explicit rows / columns */
grid: <grid-template-rows> / <grid-template-columns>;

/* Template areas */
grid: <grid-template>;

/* Implicit rows, explicit columns */
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;

/* Explicit rows, implicit columns */
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?;

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Die &&-Notation bedeutet, dass beide Schlüsselwörter angegeben werden müssen; ihre Reihenfolge spielt keine Rolle. Das ? bedeutet, dass der Begriff optional ist.

Anfangswert	`none`
Gilt für	Grid-Container
Vererbt	Nein
Animierbar	Ja (Grid-Layout ist animierbar)
CSS-Version	CSS Grid Layout Module Level 1
DOM-Syntax	`element.style.grid = "100px / 1fr 1fr"`

Wertformen

Wert	Was er bewirkt
`none`	Entfernt jedes explizite Template; alle Untereigenschaften werden auf den Anfangswert zurückgesetzt.
`<template-rows> / <template-columns>`	Setzt explizite Zeilen- und Spalten-Tracks.
`<grid-template>`	Kurzschreibweise für `grid-template-rows`, `grid-template-columns` und `grid-template-areas`.
`<template-rows> / auto-flow [dense] [<auto-cols>]`	Explizite Zeilen; Spalten werden automatisch erzeugt. `dense` hinzufügen, um Lücken aufzufüllen.
`auto-flow [dense] [<auto-rows>] / <template-cols>`	Zeilen werden automatisch erzeugt; Spalten sind explizit.
`initial`	Setzt die Eigenschaft auf ihren Standardwert zurück (`none`).
`inherit`	Erbt den berechneten Wert vom übergeordneten Element.

Beispiele

Beispiel 1: Einfaches explizites Grid

grid: 100px / auto auto auto erstellt eine explizite Zeile (100 px hoch) und drei gleichmäßige auto-breite Spalten. Die neun Boxen laufen in zusätzliche implizite Zeilen über (automatisch dimensioniert):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel 2: Auto-flow in Spalten

grid: auto auto / auto-flow legt zwei explizite Zeilen fest und weist den Browser an, beim Platzieren der Elemente automatisch Spalten zu generieren. Jedes Element fließt in eine neue Spalte, bis alle Elemente platziert sind, und füllt dabei beide Zeilen Spalte für Spalte.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel 3: Explizite Element-Platzierung mit `grid-area`

Jede Box wird mit grid-area unter Verwendung der Syntax row-start / column-start / row-end / column-end auf einem grid: 100px / auto auto auto-Template positioniert:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel 4: `fr`-Einheiten für flexible Spalten

Die Verwendung von fr-Einheiten ist das gebräuchlichste Muster für responsive Grids. Die drei Spalten unten nehmen je einen gleichen Anteil der verfügbaren Breite ein und schrumpfen oder wachsen gemeinsam:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto / 1fr 1fr 1fr;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.9);
        text-align: center;
        padding: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Three equal columns with fr units</h2>
    <div class="grid-container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
  </body>
</html>

Die Regel grid: auto / 1fr 1fr 1fr ist äquivalent zu der ausführlicheren Schreibweise:

grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
/* all other grid sub-properties reset to initial */

Beispiel 5: Benannte Template-Bereiche

Die grid-Kurzschreibweise unterstützt die Syntax von grid-template-areas direkt. Jede in Anführungszeichen gesetzte Zeichenkette steht für eine Zeile; jedes Wort darin ist ein Bereichsname. Ein . (Punkt) kennzeichnet eine leere Zelle.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: grid;
        grid:
          "header header header" 60px
          "sidebar main   main"  1fr
          "footer footer footer" 40px
          / 160px 1fr 1fr;
        gap: 8px;
        height: 260px;
        background-color: #ccc;
        padding: 8px;
      }
      .header  { grid-area: header;  background: #1c87c9; color: #fff; display: flex; align-items: center; justify-content: center; }
      .sidebar { grid-area: sidebar; background: #8ecae6; display: flex; align-items: center; justify-content: center; }
      .main    { grid-area: main;    background: #eee;    display: flex; align-items: center; justify-content: center; }
      .footer  { grid-area: footer;  background: #023e8a; color: #fff; display: flex; align-items: center; justify-content: center; }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

Der Wert nach jeder zitierten Zeilenzeichenkette (60px, 1fr, 40px) ist die Zeilenhöhe. Das / am Ende leitet die Spaltenbreiten-Liste ein (160px 1fr 1fr).

Wann `grid` vs. `grid-template` verwenden

Ziel	Verwenden
Nur explizite Zeilen-/Spaltengrößen und benannte Bereiche festlegen	`grid-template`
Auch die automatische Platzierungsrichtung oder implizite Track-Größen steuern	`grid`
Nur Spaltenbreiten festlegen	`grid-template-columns`
Nur Zeilenhöhen festlegen	`grid-template-rows`

Die engste Kurzschreibweise zu wählen macht Ihren Code leichter lesbar und vermeidet das versehentliche Zurücksetzen nicht verwandter Untereigenschaften.

Browser-Unterstützung

Die grid-Kurzschreibweise wird von allen modernen Browsern unterstützt (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). Für ältere Umgebungen müssen Sie möglicherweise Untereigenschaften einzeln setzen. Aktuelle Unterstützungsdaten finden Sie auf Can I use: CSS Grid Layout.

Siehe auch

grid-template — Kurzschreibweise nur für Template-Untereigenschaften
grid-template-columns und grid-template-rows — explizite Track-Größen
grid-template-areas — Benennung von Layout-Bereichen
grid-auto-flow — steuert, wie automatisch platzierte Elemente das Grid füllen
grid-auto-rows und grid-auto-columns — implizite Track-Größen
grid-gap — Abstände zwischen Zeilen und Spalten
grid-area — Element nach benanntem Bereich oder Liniennummern platzieren
display — der grid-Wert, der ein Element in einen Grid-Container verwandelt
align-items und justify-content — Ausrichtung innerhalb des Grids

Übungen

Übung

Welche der folgenden Aussagen zur CSS grid-Kurzschreibweise sind korrekt?

Es handelt sich um eine Kurzschreibweise, die alle sechs Grid-Untereigenschaften gleichzeitig zurücksetzt, einschliesslich Template- und Auto-Placement-Eigenschaften.Untereigenschaften, die Sie in einer grid-Deklaration weglassen, werden auf ihre Anfangswerte zurückgesetzt.Die fr-Einheit teilt den verfügbaren Platz in gleichmässige Bruchanteile unter Spalten oder Zeilen auf.Die grid-Kurzschreibweise kann explizite Template-Tracks und auto-flow-Eigenschaften gleichzeitig in einer Deklaration setzen.grid: auto / 1fr 1fr erstellt zwei gleich breite Spalten mit einer automatisch dimensionierten Zeile.

Explizite vs. implizite Tracks

Die fr-Einheit

Syntax

Wertformen

Beispiele

Beispiel 1: Einfaches explizites Grid

Beispiel 2: Auto-flow in Spalten

Beispiel 3: Explizite Element-Platzierung mit grid-area

Beispiel 4: fr-Einheiten für flexible Spalten

Beispiel 5: Benannte Template-Bereiche

Wann grid vs. grid-template verwenden

Browser-Unterstützung

Siehe auch

Übungen

Die `fr`-Einheit

Beispiel 3: Explizite Element-Platzierung mit `grid-area`

Beispiel 4: `fr`-Einheiten für flexible Spalten

Wann `grid` vs. `grid-template` verwenden