grid-auto-rows

grid-auto-rows: auto;

grid-auto-rows: 50px;

grid-auto-rows: min-content;

grid-auto-rows: minmax(30px, auto);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  font-size: 22px;
}

#example-element div:last-child {
  font-size: 13px;
}

Wenn ein Rastelement in eine Zeile positioniert wird, die nicht explizit durch grid-template-rows dimensioniert ist, werden implizite Grid-Spuren erstellt, um es aufzunehmen. Dies kann entweder dadurch geschehen, dass man explizit in eine Zeile außerhalb des Bereichs positioniert, oder indem der Auto-Placement-Algorithmus zusätzliche Zeilen erstellt.

<length>

Ist eine nicht-negative Länge.

<percentage>

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

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor der Spur angibt. Jede <flex>-dimensionierte Spur nimmt einen Anteil des verbleibenden Raums entsprechend ihrem Flex-Faktor ein.

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

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Rastelemente darstellt, die die Rasterspur belegen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Rastelemente darstellt, die die Rasterspur 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 als min behandelt. Als Maximum setzt ein <flex>-Wert den Flex-Faktor der Spur. Als Minimum wird es als Null behandelt (oder als minimaler Inhalt, wenn der Rastercontainer unter einer Minimalinhalt-Beschränkung dimensioniert ist).

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 Spurengröße bei argument geklemmt wird, wenn sie größer als das auto-Minimum ist.

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 (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-Spurgrößen (und nur auto-Spurgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine auto-dimensionierte Spur standardmäßig jeden verbleibenden Platz im Rastercontainer 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
• Automatische Platzierung im Rasterlayout – Dimensionierung von Zeilen im impliziten Raster
• Video: Introducing grid auto-placement and order