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 angegeben werden als:

• 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 Grid gibt. Alle Reihen werden implizit generiert und ihre Größe wird durch die grid-auto-rows Eigenschaft bestimmt.

[line-name]

Ein <custom-ident>, der einen Namen für die Linie an dieser Position angibt. Der Identifikator kann jeder gültige String 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, zum Beispiel [line-name-a line-name-b].

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage> Wert, bezogen auf die Blockgröße des Grid-Containers. Wenn die Größe des Grid-Containers von der Größe seiner Spuren abhängt, muss der Prozentsatz für die Berechnung der intrinsischen Größe des Grid-Containers als auto behandelt werden. Er muss dann gegen die resultierende Größe des Grid-Containers aufgelöst werden, um das Grid und seine Elemente zu layouten. Die intrinsischen Größenbeiträge der Spur können an die Größe des Grid-Containers angepasst werden und die endgültige Größe der Spur um das Minimum erhöhen, das erforderlich ist, um den Prozentsatz zu erfüllen.

<flex>

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

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Grid-Elemente repräsentiert, die die Grid-Spur belegen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Grid-Elemente repräsentiert, die die Grid-Spur belegen.

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 Flex-Faktor der Spur. Es ist als Minimum ungültig.

auto

Als Maximum repräsentiert es die größte max-content Größe der Elemente in dieser Spur.

Als Minimum repräsentiert es die größte Mindestgröße der Elemente in dieser Spur (angegeben durch die min-width/min-height der Elemente). Dies ist oft, aber nicht immer, die min-content Größe.

Wenn es außerhalb der minmax()-Notation verwendet wird, 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).

Hinweis:>auto-Spurgrößen (und nur auto-Spurgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine auto-Spur standardmäßig jeden verbleibenden Raum im Grid-Container 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 Spurgröße auf argument begrenzt wird, wenn es größer als das auto-Minimum ist.

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

Repräsentiert ein wiederholtes Fragment der Spur Liste und ermöglicht es, eine große Anzahl von Reihen, die ein wiederkehrendes Muster aufweisen, in einer kompakteren Form zu schreiben.

masonry

Der masonry-Wert gibt an, dass diese Achse gemäß dem Mauerwerksalgorithmus gelayoutet werden soll.

subgrid

Der subgrid-Wert gibt an, dass das Grid den überspannten Teil des übergeordneten Grids in dieser Achse übernimmt. Anstatt explizit angegeben zu werden, werden die Größen der Grid-Reihen/Spalten aus der Definition des übergeordneten Grids ü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 Grid-Layouts: Grid-Tracks
• Video: Definieren eines Grids
• Subgrid