grid-auto-rows CSS property

Probieren Sie es aus

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: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  font-size: 22px;
}

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

Wenn ein Raster-Element in eine Zeile positioniert wird, die nicht explizit durch grid-template-rows dimensioniert wurde, werden implizite grid Tracks erstellt, um es aufzunehmen. Dies kann entweder durch das explizite Positionieren in eine Zeile passieren, die außerhalb des Bereichs liegt, oder indem der Auto-Platzierungs-Algorithmus zusätzliche Zeilen erstellt.

Syntax

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-rows: fit-content(400px);
grid-auto-rows: fit-content(5cm);
grid-auto-rows: fit-content(20%);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: revert;
grid-auto-rows: revert-layer;
grid-auto-rows: unset;

Werte

<length>

Ist eine nicht-negative Länge.

<percentage>

Ist ein nicht-negativer <percentage> Wert relativ zur Blockgröße des Raster-Containers. Wenn die Blockgröße des Raster-Containers unbestimmt 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 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 Raster-Elemente repräsentiert, die den Raster-Track belegen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Raster-Elemente repräsentiert, die den Raster-Track 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 des Tracks. Als Minimum wird es als null (oder Mindestinhalt, wenn der Raster-Container unter einer Mindestinhaltsbeschrä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 begrenzt wird, wenn es 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 (festgelegt 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).

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 Platz im Raster-Container ein.

Formale Definition

Formale Syntax

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>  

Beispiele

Festlegen der Rasterreihengröße

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• grid-auto-columns
• grid-auto-flow
• grid
• Auto-Platzierung im Rasterlayout - Größe von Zeilen im impliziten Raster festlegen
• Video: Einführung in die automatische Rasterplatzierung und Reihenfolge