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 Rasterelement in eine Zeile positioniert wird, die nicht explizit durch grid-template-rows dimensioniert ist, werden implizite grid Tracks erzeugt, um es aufzunehmen. Dies kann entweder durch explizite Positionierung in einer Zeile außerhalb des Bereichs geschehen oder durch den Auto-Platzierungsalgorithmus, der zusätzliche Zeilen erstellt.

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage> Wert relativ zur Blockgröße des Rastercontainers. Ist die Blockgröße des Rastercontainers undefiniert, 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>-dimensionierter Track nimmt einen Anteil des verbleibenden Raums proportional zu seinem Flex-Faktor ein.

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

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Rasterelemente repräsentiert, die den Rastertrack belegen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Rasterelemente repräsentiert, die den Rastertrack 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 ist als min, wird max ignoriert und die Funktion wird als min behandelt. Als Maximum setzt ein <flex> Wert den Flex-Faktor des Tracks. Als Minimum wird es als null (oder minimaler Inhalt, wenn der Rastercontainer unter einer minimalen Inhaltsbeschränkung dimensioniert ist) behandelt.

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

auto

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

Als Minimum repräsentiert es die größte Mindestgröße der Elemente in diesem Track (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, 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 Track-Größen (und nur auto Track-Größen) können durch die Eigenschaften align-content und justify-content gedehnt werden. Daher nimmt ein auto dimensionierter Track standardmäßig jeden verbleibenden Raum 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
• Auto-Platzierung im Rasterlayout - Zeilen im impliziten Raster dimensionieren
• Video: Einführung in die automatische Rasterplatzierung und -reihenfolge