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 Grid-Element in eine Zeile positioniert wird, die nicht explizit durch grid-template-rows dimensioniert ist, werden implizite Grid-Spuren erstellt, um es zu halten. Dies kann entweder durch explizite Positionierung in eine nicht erreichbare Zeile geschehen oder durch den Autoplatzierungsalgorithmus, der zusätzliche Zeilen erstellt.

<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 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 proportional zu ihrem 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-Elemente darstellt, die die Grid-Spur einnehmen.

min-content

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

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. Als Minimum wird es als null (oder minimaler Inhalt, wenn der Grid-Container unter einer minimalen Inhaltsbeschränkung dimensioniert ist) behandelt.

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

auto

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

Als Minimum stellt es die größte Mindestgröße der Elemente in dieser Spur dar (spezifiziert durch die min-width/min-height der Elemente). Dies ist häufig, aber nicht immer, die min-content-Größe.

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

Hinweis:>auto-Spurgrößen (und nur auto-Spurgrößen) können durch die align-content und justify-content Eigenschaften gestreckt werden. Daher nimmt eine auto-dimensionierte Spur standardmäßig jeden verbleibenden Platz 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 - Zeilen in der impliziten Grid dimensionieren
• Video: Einführung in die automatische Platzierung und Reihenfolge im Grid