CSS grid-template Eigenschaft

Die CSS-Eigenschaft grid-template definiert die Zeilen, Spalten und benannten Bereiche eines CSS Grid in einer einzigen Deklaration. Sie ist eine Kurzschreibweise für drei Langhand-Eigenschaften:

grid-template-rows — die Höhe jeder Zeilenspur.
grid-template-columns — die Breite jeder Spaltenspur.
grid-template-areas — benannte Bereiche, in die Elemente mit grid-area platziert werden können.

Diese Seite erklärt die Syntax, wie der Schrägstrich Zeilen von Spalten trennt, wie die Benannte-Bereiche-Form funktioniert, wann grid-template anstelle der umfassenderen grid-Kurzschreibweise verwendet werden sollte, und zeigt bearbeitbare Beispiele.

Wie die Kurzschreibweise funktioniert

grid-template gilt nur für einen Grid-Container — ein Element mit display: grid (oder inline-grid). Die Eigenschaft hat zwei Hauptformen.

Zeilen-/Spalten-Form

Geben Sie zuerst die Zeilengrößen an, dann einen Schrägstrich (/), dann die Spaltengrößen:

.container {
  display: grid;
  grid-template: 100px 200px / 1fr 1fr 1fr; /* two rows / three columns */
}

Das / ist erforderlich, wenn Sie sowohl Zeilen als auch Spalten angeben — es teilt dem Browser mit, wo die Spaltenliste beginnt. Größen können jede Spur-Sizing-Einheit verwenden:

Einheit	Bedeutung
`px`, `%`, `em`	Feste oder relative Größen
`fr`	Ein Bruchteil des verbleibenden freien Platzes
`auto`	Nach Inhalt bemessen, verteilt dann den verbleibenden Platz
`min-content`	Kleinste Größe, die einen Überlauf vermeidet
`max-content`	Größte Größe ohne Umbruch
`minmax(min, max)`	Ein Bereich — z. B. `minmax(100px, 1fr)`
`repeat(n, size)`	Wiederholt eine Spur `n`-mal — z. B. `repeat(3, 1fr)`

Die fr-Einheit ist einzigartig für das Grid-Layout. 1fr 2fr bedeutet „ein Teil und zwei Teile des freien Platzes" — die zweite Spur ist also doppelt so breit wie die erste.

Benannte-Bereiche-Form

Jede String in Anführungszeichen repräsentiert eine Zeile. Wörter innerhalb des Strings benennen die Zellen in dieser Zeile. Zellen mit demselben Namen über mehrere Zeilen hinweg werden zu einem rechteckigen Bereich zusammengeführt. Ein Punkt (.) lässt eine Zelle unbenannt:

.container {
  display: grid;
  grid-template:
    "header header" 60px
    "nav    main"   1fr
    / 120px 1fr;
}

Die Zeilengröße (z. B. 60px, 1fr) wird nach dem String in Anführungszeichen geschrieben, vor dem nächsten String. Die optionalen Spaltengrößen folgen nach dem abschließenden /.

Anschließend platzieren Sie Elemente mit grid-area in benannten Bereichen:

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }

Dies ist die lesbarste Methode, ein klassisches Seitenlayout in CSS zu beschreiben.

Info

grid-template legt den Abstand zwischen Spuren nicht fest. Verwenden Sie gap (oder die Langhand-Eigenschaft column-gap) für den Abstand zwischen Spuren. Abstände sind vom Spur-Sizing getrennt.

grid-template vs. grid

Die umfassendere grid-Kurzschreibweise setzt auch die impliziten Grid-Eigenschaften zurück — grid-auto-rows, grid-auto-columns und grid-auto-flow — auf ihre Anfangswerte. grid-template lässt diese unberührt.

Wann welche verwenden:

Verwenden Sie grid-template, wenn Sie nur die expliziten Spuren und Bereiche definieren möchten, ohne das Auto-Placement-Verhalten zu beeinflussen.
Verwenden Sie grid, wenn Sie alle Grid-Eigenschaften auf einmal zurücksetzen möchten.

Eigenschaftsreferenz

Merkmal	Wert
Anfangswert	`none`
Gilt für	Grid-Container
Vererbbar	Nein
Animierbar	Ja — Spurgrößen sind animierbar
Spezifikation	CSS Grid Layout Module Level 1

Syntax

grid-template: none
             | <grid-template-rows> / <grid-template-columns>
             | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
             | initial | inherit | unset;

Werte

Wert	Beschreibung
`none`	Setzt alle drei Langhand-Eigenschaften (`grid-template-rows`, `grid-template-columns`, `grid-template-areas`) auf ihre Anfangswerte zurück. Elemente werden durch den Auto-Placement-Algorithmus platziert.
`<rows> / <columns>`	Legt explizite Zeilen- und Spaltenspuren fest. Jede Sizing-Einheit ist gültig: `px`, `%`, `fr`, `auto`, `minmax()`, `repeat()`, usw.
`"area-names" <size>`	Legt benannte Bereiche Zeile für Zeile fest. Jeder String in Anführungszeichen ist eine Zeile; die optionale Größe danach ist die Höhe dieser Zeile.
`initial`	Setzt die Eigenschaft auf `none` zurück.
`inherit`	Erbt den berechneten Wert vom übergeordneten Element.
`unset`	Verhält sich wie `inherit`, wenn die Eigenschaft vererbbar ist, andernfalls wie `initial`.

Beispiele

Zeilen und Spalten definieren

Dieses Grid hat eine explizite Zeile mit 170px und drei auto-bemessene Spalten. Elemente jenseits der ersten Zeile fließen in implizit erstellte Zeilen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis:

Benannte Bereiche verwenden

Hier wird dem ersten Element der Name item1 über grid-area zugewiesen. Die zwei Strings in Anführungszeichen platzieren item1 als 2×2-Block oben links. Punkte (.) markieren leere Zellen, in die die übrigen Elemente fließen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Probier es selbst »

Seitenlayout mit benannten Bereichen

Ein klassisches Drei-Abschnitt-Layout — Kopfzeile, Seitenleiste und Inhalt — in einer einzigen grid-template-Deklaration definiert:

<!DOCTYPE html>
<html>
  <head>
    <title>Named area layout</title>
    <style>
      .page {
        display: grid;
        grid-template:
          "header  header"  60px
          "sidebar content" 1fr
          "footer  footer"  40px
          / 160px 1fr;
        gap: 8px;
        height: 300px;
      }
      .page > * {
        background: #dde;
        padding: 8px;
        font-family: sans-serif;
      }
      .hdr  { grid-area: header; }
      .side { grid-area: sidebar; }
      .main { grid-area: content; }
      .ftr  { grid-area: footer; }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="hdr">Header</div>
      <div class="side">Sidebar</div>
      <div class="main">Content</div>
      <div class="ftr">Footer</div>
    </div>
  </body>
</html>

Das Layout ist vollständig in einer einzigen Eigenschaft definiert: drei Zeilen (60 px / flexibel / 40 px) und zwei Spalten (160 px Seitenleiste / flexibler Inhalt). Es sind keine grid-column- oder grid-row-Spans erforderlich — die Namen erledigen die Arbeit.

Häufige Fallstricke

Bereiche müssen ein Rechteck bilden. Sie können keinen L-förmigen oder T-förmigen benannten Bereich erstellen. Falls Sie es versuchen, ist die Deklaration ungültig und der Browser ignoriert sie.

Die Zeilenanzahl muss übereinstimmen. Die Anzahl der Zellen in jedem String in Anführungszeichen muss gleich sein. "a b" gefolgt von "a b c" ist ungültig.

grid-template setzt die drei Langhand-Eigenschaften zurück. Das Setzen von grid-template: 1fr / 1fr setzt implizit grid-template-areas: none — alle zuvor gesetzten benannten Bereiche werden gelöscht.

Implizite Spuren sind nicht betroffen. grid-template steuert nur das explizite Grid. Zusätzliche Elemente, die über die definierten Zeilen und Spalten hinausgehen, werden in impliziten Spuren platziert, die durch grid-auto-rows und grid-auto-columns bemessen werden.

Browserunterstützung

grid-template ist Teil des CSS Grid Layout Module Level 1 und wird von allen modernen Browsern unterstützt (Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+, Opera 44+). Es hat keine Auswirkung auf Elemente, die keine Grid-Container sind — kombinieren Sie es stets mit display: grid.

Übung

Was bewirkt die CSS-Eigenschaft grid-template?

Sie ermöglicht es, Zeilen, Spalten und benannte Bereiche für einen Grid-Container in einer Deklaration zu definieren.Sie wird verwendet, um Inhalte innerhalb eines Grid-Elements auszurichten.Sie ist eine Kurzschreibweise für grid-template-rows, grid-template-columns und grid-template-areas.Sie ändert die Hintergrundfarbe eines Grid-Containers.