CSS grid-template-rows Eigenschaft

Die Eigenschaft grid-template-rows legt fest, wie viele Zeilen ein CSS Grid hat und wie hoch jede davon ist. Die Track-Größen werden nacheinander, durch Leerzeichen getrennt, aufgelistet, und CSS erstellt für jeden Wert eine explizite Zeile. grid-template-rows: 100px 200px erzeugt also zwei Zeilen — die erste 100 px hoch, die zweite 200 px hoch.

Diese Eigenschaft wirkt sich nur auf Grid-Container aus (Elemente mit display: grid oder display: inline-grid). Sie ist das zeilenorientierte Gegenstück zu grid-template-columns, und beide werden häufig gemeinsam verwendet, um ein vollständiges Grid zu definieren.

Eine Track-Größe kann eine feste Länge, ein Prozentwert, eine flexible fr-Einheit, ein inhaltsbasiertes Schlüsselwort oder eine Funktion wie repeat() und minmax() sein. Die Kombination dieser Möglichkeiten macht Grid-Layouts flexibel:

Verwende eine Länge (px, rem), wenn eine Zeile eine exakte Höhe behalten soll.
Verwende fr, wenn Zeilen den verbleibenden Platz proportional aufteilen sollen.
Verwende auto oder min-content / max-content, wenn die Zeile an ihren Inhalt angepasst werden soll.
Verwende repeat(), um die Wiederholung derselben Größe zu vermeiden.
Verwende minmax(), wenn eine Zeile einen Minimal- und Maximalwert benötigt (z. B. „mindestens 100px, aber bei Bedarf größer").

Info

Die hier erstellten Zeilen bilden das explizite Grid. Falls Elemente in nicht definierte Zeilen überlaufen, werden diese zusätzlichen Zeilen stattdessen durch grid-auto-rows bestimmt.

Anfangswert	none
Gilt für	Grid-Container.
Vererbbar	Nein.
Animierbar	Ja. Die Größe der Zeilen ist animierbar.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	`object.style.gridTemplateRows = "20px 100px"`

Syntax

grid-template-rows: none
                  | auto
                  | max-content
                  | min-content
                  | <length>
                  | <percentage>
                  | <flex>           /* e.g. 1fr */
                  | fit-content(<length-percentage>)
                  | repeat(<count>, <track-list>)
                  | minmax(<min>, <max>)
                  | subgrid
                  | [line-name] <track-size> [line-name];

Die Standardschlüsselwörter initial und inherit gelten ebenfalls, wie bei jeder CSS-Eigenschaft.

Grundlegende Verwendung

Automatisch dimensionierte Zeilen

Mit auto wächst jede Zeile, um ihre höchste Zelle aufzunehmen. Dies ist der häufigste Ausgangspunkt.

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

Probier es selbst »

Mit grid-template-rows: auto auto wachsen beide Zeilen, um ihren Inhalt aufzunehmen — jede Zelle hat dieselbe Höhe wie ihr größtes Geschwisterelement in der jeweiligen Zeile.

Zeilen mit fester Höhe

Übergib Pixelwerte, um Zeilen unabhängig vom Inhalt auf eine exakte Höhe festzulegen.

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

Probier es selbst »

Hier sind die Zeilen fest: Die erste ist immer 100 px hoch und die zweite immer 300 px, unabhängig davon, wie viel Inhalt die Zellen enthalten. Inhalt, der diese Höhen überschreitet, wird je nach overflow-Einstellung abgeschnitten oder gescrollt.

fr-Einheiten, repeat() und minmax()

Die fr-Einheit

fr („Fraktion") steht für einen Anteil des freien Platzes, der im Grid übrig bleibt, nachdem Tracks mit fester Größe platziert wurden. Freier Platz ist die Gesamtgröße des Grids abzüglich des Platzes, der von Tracks mit absoluten oder inhaltsbasierten Größen belegt wird.

/* Three equal rows */
grid-template-rows: 1fr 1fr 1fr;

/* Header takes half, body takes the other half */
grid-template-rows: 1fr 1fr;

/* Header is fixed, body gets all remaining space */
grid-template-rows: 80px 1fr;

Die fr-Einheit ist nützlich, wenn das Grid eine bekannte Höhe hat (die am Container gesetzt ist) und Tracks diese ausfüllen sollen, ohne Berechnungen durchzuführen.

repeat()

repeat(count, track-list) ist eine Kurzschreibweise, um eine oder mehrere Track-Größen zu wiederholen.

/* Same as: 1fr 1fr 1fr 1fr */
grid-template-rows: repeat(4, 1fr);

/* Alternating: 80px 1fr 80px 1fr */
grid-template-rows: repeat(2, 80px 1fr);

minmax()

minmax(min, max) gibt einem Track eine Mindest- und eine Maximalgröße. Der Browser ermittelt die tatsächliche Größe innerhalb dieses Bereichs in Abhängigkeit von Inhalt und verfügbarem Platz.

/* Row is at least 80px; grows with content up to 200px */
grid-template-rows: minmax(80px, 200px);

/* Row is at least 80px; grows to fill remaining space */
grid-template-rows: minmax(80px, 1fr);

Alle drei kombinieren

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-grid {
        display: grid;
        height: 600px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr) minmax(80px, auto);
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .flex-grid > div {
        background-color: #eee;
        text-align: center;
        padding: 10px;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>fr, repeat() and minmax()</h2>
    <div class="flex-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Das Grid ist 600 px hoch. repeat(2, 1fr) erstellt zwei Zeilen, die jeweils einen gleichen Anteil der verfügbaren Höhe einnehmen. Die dritte Zeile verwendet minmax(80px, auto): Sie ist mindestens 80 px hoch, dehnt sich aber aus, wenn der Inhalt höher wird.

Benannte Linien-Tracks

Du kannst den Linien zwischen den Zeilen einen Namen geben, indem du den Namen in eckige Klammern einfasst. Benannte Linien erleichtern die Positionierung von Elementen mit grid-row erheblich, ohne Grid-Linien zählen zu müssen.

.layout {
  display: grid;
  grid-template-rows:
    [header-start] 80px [header-end body-start]
    1fr
    [body-end footer-start] 60px [footer-end];
}

/* Place an item from body-start to body-end */
.main {
  grid-row: body-start / body-end;
}

Eine Linie kann mehrere Namen tragen, die innerhalb derselben Klammern durch Leerzeichen getrennt sind — [header-end body-start] bedeutet, dass dieselbe Linie das Ende des Headers und den Anfang des Inhaltsbereichs markiert.

Inhaltsbasierte Schlüsselwörter

auto

auto bedeutet, dass die Größe des Tracks durch seinen Inhalt bestimmt wird (entspricht minmax(auto, auto)). Die Zeile wächst auf das höchste enthaltene Element, schrumpft aber nicht unter die minimale Inhaltsgröße. Wenn in derselben Deklaration auch fr-Tracks vorhanden sind, werden auto-Tracks zuerst aufgelöst, und die fr-Tracks teilen sich den verbleibenden Platz.

min-content

Die Zeile ist genau so hoch, dass der kleinste Inhalt in einer ihrer Zellen passt — in der Praxis so hoch wie das längste Wort oder das kleinste Bild.

max-content

Die Zeile ist hoch genug, um den größten Inhalt ohne Umbruch aufzunehmen. Entspricht der Vergabe von so viel vertikalem Platz, wie jede Zelle benötigt.

fit-content(`<value>`)

fit-content(200px) verhält sich wie auto (wächst mit dem Inhalt), ist aber auf den angegebenen Wert begrenzt. Entspricht min(max-content, max(auto, 200px)). Nützlich, wenn eine Zeile inhaltsorientiert dimensioniert sein soll, aber eine bestimmte Grenze nicht überschreiten darf.

subgrid

Wenn ein Grid-Element selbst ein Grid-Container ist, weist subgrid bei grid-template-rows das innere Grid an, die Zeilen-Tracks des übergeordneten Grids zu verwenden, anstatt eigene zu erstellen. So lässt sich der Inhalt in verschachtelten Grid-Elementen am Rhythmus des äußeren Grids ausrichten.

.parent {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
}

.child {
  display: grid;
  /* This child spans 3 rows of the parent */
  grid-row: 1 / 4;
  /* Adopt those same 3 row tracks */
  grid-template-rows: subgrid;
}

subgrid wird seit Ende 2023 weitgehend unterstützt (Chrome 117+, Firefox 71+, Safari 16+).

auto-fill und auto-fit in repeat()

auto-fill und auto-fit werden innerhalb von repeat() verwendet, um so viele Tracks zu erstellen, wie in den Container passen. Sie werden häufiger bei grid-template-columns eingesetzt, funktionieren aber bei Zeilen identisch, wenn der Container eine feste Höhe hat.

/* As many rows of at least 100px as will fit */
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));

auto-fill — füllt das Grid mit so vielen Tracks wie möglich, auch wenn einige leer sind.
auto-fit — wie auto-fill, reduziert aber leere Tracks auf die Größe null, sodass Elemente den verfügbaren Platz ausfüllen.

Werte

Wert	Beschreibung
`none`	Standard. Es sind keine expliziten Zeilen definiert; alle Zeilen sind implizit.
`auto`	Die Zeilenhöhe wird durch den Inhalt oder den verfügbaren Platz bestimmt.
`max-content`	Die Zeile ist so hoch wie die größte intrinsische Größe unter ihren Elementen.
`min-content`	Die Zeile ist so hoch wie die kleinste intrinsische Größe unter ihren Elementen.
`minmax(min, max)`	Die Track-Größe liegt innerhalb des angegebenen Bereichs. `min` darf kein `fr` sein; `max` kann es sein.
`<length>`	Eine feste Höhe wie `100px` oder `2rem`.
`<percentage>`	Eine Höhe relativ zur Höhe des Grid-Containers (muss bestimmt sein).
`<flex>` (`fr`)	Eine nicht-negative Dimension, die einen Anteil des verbleibenden freien Platzes einnimmt.
`fit-content(<value>)`	Inhaltsorientiert, aber auf den angegebenen Wert begrenzt.
`repeat(count, tracks)`	Wiederholt ein Muster von Track-Größen. `count` kann eine Zahl, `auto-fill` oder `auto-fit` sein.
`subgrid`	Die Track-Liste wird vom übergeordneten Grid geerbt.
`initial`	Setzt die Eigenschaft auf ihren Standardwert zurück (`none`).
`inherit`	Erbt den Wert vom übergeordneten Element.

Häufige Fallstricke

fr erfordert eine definierte Container-Höhe. Wenn der Grid-Container keine explizite height hat, gibt es keinen freien Platz, den fr-Zeilen aufteilen könnten — sie werden stattdessen auf auto-Dimensionierung zurückgestuft. Setze immer eine height (oder min-height) am Container, wenn du fr in Zeilen verwendest.
Prozentwerte erfordern aus demselben Grund eine definierte Container-Höhe. Wenn die Höhe des Containers intrinsisch ist, werden prozentuale Zeilengrößen ebenfalls zu auto aufgelöst.
Nur explizite Zeilen. Diese Eigenschaft dimensioniert nur die von dir deklarierten Zeilen. Zusätzliche Zeilen, die durch überlaufende Elemente entstehen, werden durch grid-auto-rows dimensioniert — diese impliziten Zeilen sind standardmäßig auto, wenn grid-auto-rows nicht gesetzt ist.
minmax(0, 1fr) vs. 1fr. Die fr-Einheit hat ein implizites Minimum von auto, sodass 1fr-Zeilen nicht unter ihre Inhaltsgröße schrumpfen können. Verwende minmax(0, 1fr), wenn Zeilen explizit unter den Inhalt schrumpfen sollen — zum Beispiel in Scroll-Containern.

Übung

Was macht die CSS-Eigenschaft grid-template-rows?

Sie definiert die Anzahl der Zeilen in einem Grid-Layout.Sie legt die Größe(n) der Zeilen in einem Grid-Layout fest.Sie erstellt das Grid-Layout in CSS.Sie steuert den Abstand zwischen den Zeilen in einem Grid-Layout.Sie definiert die Reihenfolge der Ebenen in einem Grid-Layout.