Diegrid-auto-rowsCSS Eigenschaft legt die Größe einer implizit erstellten GitterzeileTrack oder eines Musters von Tracks fest.

Probieren Sie es aus

grid-auto-rows: auto;

grid-auto-rows: 50px;

grid-auto-rows: min-content;

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

<section>  <div>    <div>      <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 Rasterelement in eine Zeile positioniert wird, die nicht explizit durchgrid-template-rows dimensioniert ist, werden impliziteGitter Tracks erstellt, um es aufzunehmen. Dies kann entweder durch explizite Positionierung in eine Zeile außerhalb des Bereichs geschehen oder durch den Algorithmus der automatischen Platzierung, der 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 Rastercontainers. Wenn die Blockgröße des Rastercontainers unbestimmt ist, wird der Prozentwert wieauto behandelt.

<flex>

Ist eine nicht negative Dimension mit der Einheitfr, die den Flex-Faktor des Tracks angibt. Jeder<flex>-dimensionierte Track nimmt einen Anteil des verbleibenden Platzes proportional zu seinem Flex-Faktor ein.

Wenn außerhalb einerminmax()-Notation angegeben, impliziert dies ein automatisches Minimum (d.h.minmax(auto, <flex>)).

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag von Rasterelementen darstellt, die den Grid-Track belegen.

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag von Rasterelementen darstellt, die den Grid-Track belegen.

minmax(min, max)

Ist eine funktionale Notation, die einen Größenbereich definiert, der größer als oder gleichmin und kleiner als oder gleichmax ist. Wennmax kleiner alsmin ist, wirdmax ignoriert und die Funktion wird alsmin behandelt. Als Maximum setzt ein<flex>-Wert den Flex-Faktor des Tracks. Als Minimum wird er als null (oder als minimaler Inhalt behandelt, wenn der Rastercontainer unter einer minimalen Inhaltsbeschränkung dimensioniert wird).

fit-content( [ <length> | <percentage> ] )

Stellt die Formelmin(max-content, max(auto, argument)) dar, die ähnlich wieauto berechnet wird (d.h.minmax(auto, max-content)), außer dass die Track-Größe aufargument geklemmt wird, wenn es größer als dasauto-Minimum ist.

auto

Als Maximum stellt es die größtemax-content Größe der Elemente in diesem Track dar.

Als Minimum stellt es die größte Mindestgröße der Elemente in diesem Track dar (spezifiziert durch diemin-width/min-height der Elemente). Dies ist oft, aber nicht immer, diemin-content Größe.

Wird außerhalb derminmax() Notation verwendet, stelltauto den Bereich zwischen dem oben beschriebenen Minimum und Maximum dar. Dies verhält sich in den meisten Fällen ähnlich wieminmax(min-content,max-content).

Hinweis:auto Track-Größen (und nurauto Track-Größen) können durch die Eigenschaftenalign-content undjustify-content gedehnt werden. Daher nimmt einauto dimensionierter Track standardmäßig jeden verbleibenden Platz im Rastercontainer 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

Rasterzeilengröße einstellen

HTML

<div>  <div></div>  <div></div>  <div></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
• Automatische Platzierung im Rasterlayout - Zeilen im impliziten Raster dimensionieren
• Video:Einführung in die automatische Rasterplatzierung und Ordnung