grid-template-rows

/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [line-name] 100px;
grid-template-rows: [line-name1] 100px [line-name2 line-name3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-rows:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;

Diese Eigenschaft kann wie folgt angegeben werden:

• entweder der Schlüsselwortwert none
• oder ein <track-list> Wert
• oder ein <auto-track-list> Wert.

none

Ist ein Schlüsselwort, das bedeutet, dass es kein explizites Gitter gibt. Alle Reihen werden implizit generiert und ihre Größe wird durch die Eigenschaft grid-auto-rows bestimmt.

[line-name]

Ein <custom-ident>, das einen Namen für die Linie an dieser Position angibt. Der Identifikator kann eine beliebige gültige Zeichenkette sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die durch ein Leerzeichen innerhalb der eckigen Klammern getrennt sind, z. B. [line-name-a line-name-b].

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage> Wert, relativ zur Blockgröße des Gittercontainers. Wenn die Größe des Gittercontainers von der Größe seiner Bahnen abhängt, muss der Prozentsatz für die Berechnung der inhärenten Größe des Gittercontainers als auto behandelt werden. Es muss dann für das Layout des Gitters und seiner Elemente gegen die resultierende Gittercontainergröße aufgelöst werden. Die inhärenten Größenbeiträge der Bahn können an die Größe des Gittercontainers angepasst werden und die endgültige Größe der Bahn um den minimalen Betrag erhöhen, der zur Einhaltung des Prozentsatzes erforderlich wäre.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flexfaktor der Bahn angibt. Jede <flex>-große Bahn nimmt einen Anteil des verbleibenden Raumes im Verhältnis zu ihrem Flexfaktor ein. Wenn sie außerhalb einer minmax() Notation auftaucht, impliziert sie ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Gitterelemente darstellt, die die Gitterbahn einnehmen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitterelemente darstellt, die die Gitterbahn einnehmen.

minmax(min, max)

Ist eine funktionale Notation, die einen Größenbereich definiert, der größer oder gleich min und kleiner oder gleich max ist. Wenn max kleiner als min ist, wird max ignoriert und die Funktion wird als min behandelt. Als Maximum setzt ein <flex> Wert den Flexfaktor der Bahn. Es ist als Minimum ungültig.

auto

Als Maximale repräsentiert die größte max-content Größe der Elemente in dieser Bahn.

Als Minimale steht es für die größte Mindestgröße der Elemente in dieser Bahn (spezifiziert durch die min-width/min-height der Elemente). Dies ist oft, aber nicht immer, die min-content Größe.

Wenn außerhalb der minmax() Notation verwendet, repräsentiert auto den Bereich zwischen dem oben beschriebenen Minimum und Maximum. Dies verhält sich in den meisten Fällen ähnlich wie minmax(min-content,max-content).

Note: auto Bahngrößen (und nur auto Bahngrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine auto-große Bahn standardmäßig jeden verbleibenden Platz im Gittercontainer ein.

fit-content( [ <length> | <percentage> ] )

Repräsentiert die Formel min(max-content, max(auto, argument)), die ähnlich wie auto berechnet wird (d.h. minmax(auto, max-content)), außer dass die Bahnengröße beim Argument begrenzt wird, wenn sie größer als das auto Minimum ist.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Repräsentiert ein wiederholtes Fragment der Bahnliste, das es ermöglicht, eine große Anzahl von Reihen, die ein sich wiederholendes Muster aufweisen, in einer kompakteren Form zu schreiben.

masonry

Der Wert masonry zeigt an, dass diese Achse nach dem Mauerwerksalgorithmus angeordnet werden soll.

subgrid

Der subgrid Wert zeigt an, dass das Gitter den überspannten Teil seines Muttergitters in dieser Achse übernehmen wird. Anstatt explizit angegeben zu werden, werden die Größen der Gitterreihen/Spalten aus der Definition des Muttergitters übernommen.

grid-template-rows = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Ergebnis

• grid-template-columns
• grid-template-areas
• grid-template
• Grundlagen des Gitterlayouts: Gitternetzbahnen
• Video: Ein Gitter definieren
• Subgrid