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 folgendermaßen 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 Zeilen werden implizit generiert und ihre Größe wird durch die Eigenschaft grid-auto-rows bestimmt.

[line-name]

Ein <custom-ident>, der einen Namen für die Linie an dieser Stelle angibt. Der Identifikator kann ein beliebiger gültiger String sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die durch einen Leerraum 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 Tracks abhängt, muss der Prozentsatz für Zwecke der Berechnung der intrinsischen Größe des Gittercontainers als auto behandelt werden. Er muss dann gegen die resultierende Größe des Gittercontainers aufgelöst werden, um das Gitter und seine Elemente zu layouten. Die intrinsischen Größenbeiträge des Tracks können an die Größe des Gittercontainers angepasst werden und können die endgültige Größe des Tracks um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu honorieren.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flexfaktor des Tracks angibt. Jeder <flex>-große Track nimmt einen Anteil des verbleibenden Raums im Verhältnis zu seinem Flexfaktor ein. Wenn er außerhalb einer minmax()-Notation erscheint, impliziert er ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

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

min-content

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

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 des Tracks fest. Es ist als Minimum ungültig.

auto

Als Maximum stellt es die größte max-content-Größe der Elemente in diesem Track dar.

Als Minimum stellt es die größte Mindestgröße von Elementen in diesem Track dar (spezifiziert durch die min-width/min-height der Elemente). Dies ist oft, aber nicht immer, die min-content-Größe.

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

Note: auto Trackgrößen (und nur auto Trackgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt ein automatisch bemessener Track standardmäßig jeden verbleibenden Raum im Gittercontainer ein.

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

Stellt die Formel min(max-content, max(auto, argument)) dar, die ähnlich wie auto berechnet wird (d.h. minmax(auto, max-content)), außer dass die Trackgröße bei argument begrenzt ist, wenn sie größer als das auto-Minimum ist.

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

Stellt ein wiederholtes Fragment der Track-Liste dar und ermöglicht es, eine große Anzahl von Zeilen, die ein wiederkehrendes Muster aufweisen, in kompakter Form zu schreiben.

masonry

Der masonry-Wert gibt an, dass diese Achse nach dem Masonry-Algorithmus layoutiert werden soll.

subgrid

Der subgrid-Wert gibt an, dass das Gitter den überspannten Teil des übergeordneten Gitters auf dieser Achse übernimmt. Anstatt explizit angegeben zu werden, werden die Größen der Gitterzeilen/-spalten aus der Definition des übergeordneten Gitters ü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
• Grundkonzepte des Gitternetzlayouts: Gittertracks
• Video: Defining a grid
• Subgrid