grid-auto-rows

Wenn ein Grid-Item in eine Reihe positioniert wird, die nicht explizit durch grid-template-rows dimensioniert ist, werden implizite Grid Tracks erstellt, um es aufzunehmen. Dies kann entweder durch explizite Positionierung in eine Reihe, die außerhalb des Bereichs liegt, oder durch den Autoplatzierungsalgorithmus, der zusätzliche Reihen erstellt, geschehen.

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage> Wert relativ zur Blockgröße des Grid-Containers. Wenn die Blockgröße des Grid-Containers undefiniert ist, wird der Prozentwert wie auto behandelt.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks angibt. Jeder <flex>-dimensionierte Track nimmt einen Anteil des verbleibenden Raums im Verhältnis zu seinem Flex-Faktor ein.

Wenn es außerhalb einer minmax()-Notation auftritt, impliziert es ein automatisches Minimum (d. h. minmax(auto, <flex>)).

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Grid-Items darstellt, die den Grid-Track einnehmen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Grid-Items darstellt, die den Grid-Track einnehmen.

minmax(min, max)

Ist eine Funktionsnotation, 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 als min behandelt. Als Maximum setzt ein <flex>-Wert den Flex-Faktor des Tracks. Als Minimum wird es als null behandelt (oder als minimaler Inhalt, wenn der Grid-Container unter einer minimalen Inhaltsbeschränkung dimensioniert wird).

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 eingeklammert ist, wenn sie größer als das auto-Minimum ist.

auto

Als Maximum repräsentiert es die größte max-content Größe der Items in diesem Track.

Als Minimum repräsentiert es die größte Mindestgröße der Items in diesem Track (spezifiziert durch die min-width/min-height der Items). 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).

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

grid-auto-rows = 
  <track-size>   

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

<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>  

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}

Ergebnis

• grid-auto-columns
• grid-auto-flow
• grid
• Autoplatzierung im Grid-Layout - Größenanpassung von Reihen im impliziten Grid
• Video: Einführung in die automatische Platzierung von Grids und die Reihenfolge