CSS-Almanach → Eigenschaften → G → grid-auto-rows

grid-auto-rows

Avatar of Mojtaba Seyedi
Mojtaba Seyedi am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die CSS-Eigenschaft grid-auto-rows ist Teil der CSS Grid Layout-Spezifikation und gibt die Größe von Grid-Zeilen an, die ohne explizite Größenangabe erstellt wurden. Mit anderen Worten, diese Eigenschaft legt die Größe von impliziten Zeilen und allen anderen Zeilen fest, die in der grid-template-rows-Eigenschaft keine explizite Größe erhalten haben.

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"
                       "media detail detail";
  grid-template-rows: 200px;
  grid-auto-rows: 150px;
}

Dieses Beispiel erstellt einen Grid-Container mit zwei Zeilen, die durch grid-template-areas definiert sind. Die erste Zeile hat eine explizite Größe, die durch grid-template-rows festgelegt wird, die zweite Zeile jedoch nicht. Hier kommt grid-auto-rows ins Spiel und setzt die Größe dieser Zeile auf 150px.

Anwendungsfälle für grid-auto-rows

Wie oben bereits erwähnt, legt grid-auto-rows die Größe aller Zeilen fest, die keine explizite Größe haben. Nun stellt sich die Frage: Welche Arten von Zeilen haben keine explizite Größe? Oder wie erstellt ein Grid Zeilen ohne explizite Größe?

Hier sind einige Situationen, in denen dies vorkommen kann.

Zeilen, die durch grid-template-areas definiert sind und keine explizite Größe durch grid-template-rows erhalten

Der erste Fall ist der, den wir bereits am Anfang dieses Artikels gesehen haben. Ein Grid kann eine explizite Zeile haben, die durch grid-template-areas definiert ist, ohne dass ihre Größe explizit durch die Eigenschaft grid-template-rows festgelegt wird.

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"
                       "media detail detail"; /* 2 rows */
  grid-template-rows: 200px; /* 1 size */
}

Die erste Zeile ist auf 200px gesetzt, und da die letzte Zeile keine explizite Größeneinstellung hat, wird sie auf auto gesetzt. In diesem Beispiel hat die zweite Zeile keinen Inhalt, daher ist auto gleich null Größe.

A row that is 200 pixels tall that s split into three equal columns.
Zwei Zeilen-Tracks, von denen einer eine explizite Größe hat, aber nicht der zweite, der auf auto gesetzt ist, was hier null entspricht. Deshalb sehen Sie keinen Abstand zwischen den Gridlinien #2 und #3.

Wenn wir grid-auto-rows zum obigen Beispiel hinzufügen, können wir auch die Größe der letzten Zeile steuern.

.grid-container {
  display: grid;
  grid-template-areas: "media detail detail"
                       "media detail detail";
  grid-template-rows: 200px;
  grid-auto-rows: 150px;
}

/* Make sure grid items expand to the second row */
.grid-items {
  grid-row: 1/3;
}

Wie Sie im folgenden Bild sehen können, ist die Größe der letzten Zeile auf 150px gesetzt.

Two row tracks. The first is 200 pixels tall and the second row is 150 pixels tall using the grid-auto-rows property.

Beachten Sie, dass die Tracks, die keine explizite Größe haben, auto-sized sind.

Implizite Zeilen werden erstellt, wenn mehr Grid-Elemente als Zellen vorhanden sind

Ein Grid, das durch grid-template-columns, grid-template-rows oder/und grid-template-areas definiert ist, wird als explizites Grid bezeichnet, was bedeutet, dass alle Grid-Tracks eine festgelegte Größe haben. Nehmen wir zum Beispiel an, wir haben sechs HTML-Kindelemente in einem übergeordneten Grid-Container und definieren explizit drei Spalten und zwei Zeilen im Grid.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
}

Wir haben implizite Grid-Tracks für diese Spalten und Zeilen, da es keine Größeninformationen gibt. Nur die Anzahl der Spalten und die Anzahl der Zeilen.

Eine Situation, in der implizite Zeilen auftreten, ist, wenn es mehr Grid-Elemente als definierte Zeilen gibt. Stellen Sie sich vor, in unserem letzten Beispiel haben wir jetzt mehr als 6 HTML-Elemente. Wir haben zuvor drei Spalten und zwei Zeilen eingerichtet, sodass es genau 6 Zellen im Grid gibt – die perfekte Menge für unsere 6 Elemente. Aber mit mehr als 6 Elementen haben wir plötzlich ein Überlaufproblem, oder?

Überhaupt nicht! Der Auto-Platzierungsalgorithmus von CSS Grid erstellt zusätzliche Zeilen oder Spalten, um die zusätzlichen Elemente aufzunehmen. Diese zusätzlichen Spalten und Zeilen werden als implizite Tracks bezeichnet.

Standardmäßig erstellt der Auto-Platzierungsalgorithmus Zeilen-Tracks, um zusätzliche Elemente aufzunehmen, sodass unser Grid alles aufnehmen kann, egal wie viele Elemente wir hineinwerfen.

Die impliziten Zeilen werden jedoch automatisch anhand ihres Inhalts größenmäßig festgelegt. Deshalb ist grid-auto-rows so nützlich – wir können all diesen Zeilen eine Größe geben und CSS Grid wird aufhören, Zeilen zu füllen, wenn es das letzte Element erreicht.

Nehmen wir an, wir geben diesen impliziten Grid-Zeilen die Größe 150px.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-auto-rows: 150px;
}

Jetzt, egal wie viele implizite Zeilen erstellt werden, sie alle werden auf 150px groß sein.

A three-by-four grid of columns and rows, each numbered.
Das explizite Grid ist mit einer durchgezogenen Linie und das implizite mit einer gepunkteten Linie gekennzeichnet.

Implizite Zeilen werden erstellt, wenn wir ein Element außerhalb des expliziten Grids positionieren

Ein weiteres Szenario, in dem die Eigenschaft grid-auto-rows nützlich ist, ist, wenn implizite Tracks erstellt werden, wenn wir ein Element außerhalb des expliziten Grids positionieren. Die impliziten Tracks werden automatisch erstellt, um Platz für dieses Element zu schaffen.

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* 3 explicit columns */
  grid-template-rows: 150px; /* 1 explicit row */
  grid-auto-rows: 150px; /* Size of the implicit rows */
}

.grid-item:last-child {
  grid-column: 5;
  grid-row: 3; /* Placed in 3rd row in a 1-row grid */
}

Was wir dort getan haben, war, das letzte .grid-item-Kind in der dritten Zeile zu positionieren… aber es gibt keine dritte Zeile in unserem einzeiligen Grid! Das platziert das letzte Grid-Element außerhalb des expliziten Grids, was zwei implizite Zeilen-Tracks erstellt. Auch wenn diese Zeilen für uns erstellt wurden, können wir sie mit der Eigenschaft grid-auto-rows auf 150px setzen.

Das Platzieren des letzten Kindes in der dritten Zeile eines einzeiligen expliziten Grids verursacht zwei implizite Zeilen-Tracks. Wir haben diese Zeilen-Größe mit der Eigenschaft grid-auto-rows auf 150px gesetzt.

Syntax

grid-auto-rows: <track-size>+
Vollständige Definition 
where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

where
<length-percentage> = <length> | <percentage>
  • Anfangswert: auto
  • Gilt für: Grid-Container
  • Vererbt: nein
  • Berechneter Wert: Wie angegeben, jedoch mit relativen Längen, die in absolute Längen umgewandelt wurden
  • Prozentangaben: Beziehen sich auf die entsprechende Dimension des Inhaltsbereichs
  • Animationstyp: Wenn die Listenlängen übereinstimmen, nach dem berechneten Werttyp pro Element in der berechneten Track-Liste; andernfalls diskret

Mehrere Track-Größen

Wir können mehrere Zeilengrößen für Grid-Tracks mithilfe der Eigenschaft grid-auto-rows angeben. In diesem Fall funktioniert die multiple Track-Größe als Muster und wird bei Bedarf wiederholt.

.grid-container {
  display: grid;
  grid-template-rows: 50px 50px;
  grid-auto-rows: 40px 60px 80px;
}

.grid-item:last-child {
  grid-row: 8;
}

Hier verschieben wir das letzte Element unseres Grids aus den expliziten Zeilen und unser Grid erstellt als Ergebnis implizite Zeilen, um dieses Element aufzunehmen. Dieses Grid hat zwei explizite Zeilen (50px 50px) und da das letzte Element in der achten Zeile liegen soll (grid-row: 8), werden sechs implizite Zeilen automatisch im Grid generiert.

grid-auto-rows setzt die erste implizite Zeilengröße auf 40px, die zweite auf 60px und die dritte Zeile auf 80px. Da wir mehr als drei implizite Zeilen haben, wiederholt unser Grid dieses Muster, um sie zu größenmäßig festzulegen.

Ein Grid mit mehreren Zeilengrößen, die durch die Eigenschaft grid-auto-rows festgelegt sind. Die Mehrfachwerte werden als Größe der impliziten Zeilen wiederholt.

Wenn wir noch eine implizite Zeile hätten, wie groß wäre diese Zeile dann?

Zeigen Sie mir die Antwort!

Richtig, sie wäre 40 Pixel hoch!

Werte

Die Werte von grid-auto-rows sind fast gleich wie die Werte der grid-template-rows-Eigenschaft, nur dass Sie bei grid-auto-rows die folgenden Werte nicht verwenden können

  • none
  • [linename]
  • repeat()
  • subgrid
  • masonry
/* Keyword values */
grid-auto-rows: auto;
grid-auto-rows: min-content;
grid-auto-rows: max-content;

/* single track-size values */
grid-auto-rows: 200px;
grid-auto-rows: 30vmin;
grid-auto-rows: 50%;
grid-auto-rows: 1.5fr;
grid-auto-rows: minmax(100px, 2fr);
grid-auto-rows: minmax(min-content, 1fr);
grid-auto-rows: fit-content(15rem);

/* multiple track-size values */
grid-auto-rows: 100px 1fr;
grid-auto-rows: 200px min-content 1fr;
grid-auto-rows: 100px 200px 50px 10%;
grid-auto-rows: minmax(100px, auto) auto max-content fit-content(200px);

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

<length>

Dieser Wert kann eine beliebige gültige und nicht-negative CSS-Länge sein, wie z. B. px, em und rem, unter anderem, um die Track-Größe (d. h. die Höhe) der Zeile anzugeben.

<percentage>

Dies ist ein nicht-negativer Wert, der sich auf die innere Inline-Größe des Grid-Containers bezieht. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, dann muss die Prozentangabe genauso behandelt werden, als würde auto deklariert.

Ein Nachteil bei der Verwendung eines Prozentwerts ist, dass, wenn Sie Abstände zwischen den Tracks hinzufügen, die Größe der Abstände zur Größe der Tracks hinzugefügt wird, was zu einem Überlauf führen kann. Verwenden Sie die fr-Einheit oder das Schlüsselwort auto, um die Tracks zu größenmäßig festzulegen und dies zu verhindern.

<flex>

Dies ist ein nicht-negativer Wert, der in fr-Einheiten ausgedrückt wird, und er ermöglicht es Ihnen, flexible Grid-Tracks zu erstellen, indem die Größe eines Tracks als Bruchteil des verfügbaren Platzes im Grid-Container angegeben wird. Auf diese Weise ändern sich die Zeilen mit der Höhe des Grids, was zu einem reaktionsfähigeren Grid führt.

Betrachten Sie zum Beispiel einen Grid-Container, der 900px hoch ist und drei implizite Zeilen hat. Nehmen wir an, die Höhe der ersten (oberen) Zeile ist fixiert (d. h. sie ändert sich nicht) auf 300px, während die zweite Zeile eine fraktionale Einheit (1fr) und die dritte Zeile zwei fraktionale Einheiten (2fr) beansprucht.

.grid {
  display: grid;
  height: 900px;
  grid-auto-rows: 300px 1fr 2fr;
}

Die zweite und dritte Zeile sind fraktional, daher werden sie den verbleibenden verfügbaren Platz einnehmen. Und in diesem Fall ist der verfügbare Platz das, was nach Abzug der festen Höhe von 300px der ersten Zeile übrig bleibt. Danach verteilen sich die zweite und dritte Zeile den Rest entsprechend der Anzahl ihrer Fraktionen.

In diesem Beispiel beträgt der verbleibende und verfügbare Platz 600px (d. h. 900px minus 300px). Die zweite Zeile erhält eine Fraktion (1fr) dieses Platzes und die dritte Zeile erhält zwei Fraktionen (2fr). Lassen Sie uns kurz rechnen, um die Höhe einer Fraktion von 600px zu ermitteln.

1fr = ([Grid Container Height] - [Fixed Row Height]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px

Aha! Eine Fraktion ist 200px. Und da die zweite Zeile 1fr ist, muss sie auch 200px sein. Das lässt uns mit 400px verfügbarem Platz (900px – 300px – 200px), was zufällig doppelt so groß ist wie die zweite Zeile.

minmax(min, max)

Die Funktion minmax() akzeptiert zwei Argumente: einen minimalen Längenwert und einen maximalen Längenwert. Und was das einem Grid-Container sagt, ist, dass die grid-auto-rows nicht höher als der Mindestwert sein darf, aber nicht kürzer als der Höchstwert. Unser Leitfaden zu CSS-Funktionen bietet eine gründlichere, detaillierte Erklärung zur Funktionsweise.

Nehmen Sie das folgende Beispiel

grid-auto-rows: 200px minmax(100px, 400px);

Hier gibt es zwei Zeilen: eine, die 200px hoch ist, und eine andere, die als minmax(100px, 400px) ausgedrückt wird. Sieht seltsam aus, oder? Aber das sagt nur aus, dass die zweite Zeile mindestens 100px Platz einnehmen muss, aber nicht mehr als 400px.

Einfacher ausgedrückt: Solange mehr als 100px Platz zur Verfügung steht, kann die zweite Zeile bis zu 400px flexibel sein, muss aber dort stoppen. Andernfalls ist die Zeile 100px hoch.

Die Argumente min und max akzeptieren alle folgenden Werte, mit der Ausnahme, dass der min-Wert kein Flex-Wert sein kann (z. B. 1fr)

<length-percentage> | <flex> | min-content | max-content | auto

Daher ist dies ungültig, da der min-Wert ein Flex-Wert ist

/* 👎 */
grid-auto-rows: minmax(1fr, 500px) 3fr;

Aber diese sind völlig gültig

/* 👍 */
grid-auto-rows: minmax(auto, 1fr) 3fr;
grid-auto-rows: minmax(200%, 1fr) 1fr;

auto

Das Schlüsselwort auto verhält sich in den meisten Fällen ähnlich wie minmax(min-content, max-content).

Da auto-Track-Größen durch die Eigenschaften align-content und justify-content gestreckt werden können, nehmen sie standardmäßig allen verbleibenden Platz im Grid-Container ein – auto-matisch. Dennoch können auto-Track-Größen keinen Kampf gegen fr-Einheiten gewinnen, wenn sie den verbleibenden Platz zuweisen – sie passen sich der maximalen Größe ihres Inhalts an.

Schauen Sie sich das Ergebnis dieser beiden Track-Beispiele an

grid-auto-rows: auto auto auto;
grid-auto-rows: auto 1fr auto;

Wenn alle drei Zeilen auf auto gesetzt sind, teilen sie sich nur gleichen Platz. Aber wenn wir eine fraktionale Einheit in der Mitte als zweite Zeile einfügen, sind die auto-Zeilen nur so hoch wie der Inhalt darin und die 1fr-Zeile nimmt den verbleibenden Platz ein.

Demonstrating the behavior of fractional units next to auto tracks.

min-content

Das Schlüsselwort min-content repräsentiert die kleinstmögliche Fläche, die ein Element in einem Grid-Container einnehmen kann, ohne dass sein Inhalt überläuft. Der Inhalt kann Text, Bilder oder Videos sein.

Nehmen wir an, der Inhalt ist „CSS ist fantastisch.“ vertikal geschrieben. Das min-content ist die Breite des Wortes „fantastisch“, da dies der höchste Teil des Inhalts ist (höher als „CSS“ und „ist“). Wenn die Zeile noch kürzer wird, beginnt der Text über den Container hinaus zu laufen.

Im Code sieht das so aus

.grid {
  display: grid;
  grid-auto-rows: min-content 1fr;
  gap: 1rem;
}

.grid-item {
  writing-mode: vertical-rl;
}

…was zu etwas wie diesem führt

Demonstrating the behavior of the min-content keyword in a grid layout

max-content

Das Schlüsselwort max-content repräsentiert die kleinste benötigte Größe für ein Element, damit es seinen gesamten Inhalt aufnehmen kann, ohne umgebrochen oder überlaufen zu werden. Ein Name, der „max“ enthält, lässt es so klingen, als hätten wir es mit einer maximalen Größe zu tun, daher kann dieser Wert ein kleiner Kopfnuss sein.

Wenn wir unser min-content-Beispiel von oben wieder aufgreifen, wächst ein Grid-Track mit dem Größenwert max-content, bis sein Inhalt in eine einzige Zeile passt. Im Fall von „CSS ist fantastisch“ ist max-content so viel Platz, wie diese drei Wörter zusammen auf einer Zeile einnehmen.

.grid {
  display: grid;
  grid-auto-rows: max-content 1fr;
  gap: 1rem;
}
Demonstrating the behavior of the max-content keyword in a grid layout

fit-content(<length-percentage>)

Die Funktion fit-content() (es gibt eine solide Erklärung dazu in unserem Leitfaden zu CSS-Funktionen) nutzt den verfügbaren Platz und akzeptiert einen percentage- oder length-Wert als maximale Größe für einen Grid-Track, wobei sichergestellt wird, dass der Track niemals über den **max-content** hinausgeht und niemals kleiner als ein Minimum wird. Das Minimum ist oft, aber nicht immer, gleich dem min-content.

.grid {
  display: grid;
  grid-auto-rows: fit-content(400px) fit-content(400px) 1fr;
  gap: 1rem;
}

In der untenstehenden Abbildung dehnt sich die erste Zeile nicht über ihre max-content-Größe hinaus (d. h. die Breite der Wörter „fit-content(400px)“ in einer einzigen Zeile) – sie dehnt sich nur aus, um ihren Inhalt aufzunehmen. Die zweite Zeile hat jedoch viel mehr Inhalt und stoppt beim Dehnen, sobald sie eine Höhe von 400px erreicht, was das Limit ist, das der Funktion gesetzt ist.

Was wir hier für die ersten beiden Zeilen sagen, ist, dass sie so hoch sein sollen wie ihr maximaler Inhalt, aber nur bis zu 400px. Wenn sie den gesamten Inhalt innerhalb dieses Limits unterbringen kann, großartig, stoppen Sie dort, wo der max-content ist. Andernfalls zeigen Sie so viel wie möglich bis 400px an und beginnen dann, zusätzliche Zeilen zu erstellen.

Beispiele

Lassen Sie uns eine Galerie mit einer unbekannten Anzahl von Elementen erstellen, die automatisch in Zeilen wiederholt werden, und da wir nicht wissen, wie viele Elemente wir benötigen werden, gibt es keine Möglichkeit, die Größe der Zeilen explizit festzulegen.

Hier kommt die Eigenschaft grid-auto-rows ins Spiel, um die Größe dieser automatisch generierten Zeilen in unserer Galerie festzulegen.

Wir möchten, dass unsere Zeilen ein sich wiederholendes Muster von 150px und 200px haben.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px 200px;
  gap: 1rem;
}
A gallery created by CSS Grid that has auto generated implicit rows. We set the size of the implicit rows to the pattern of 150 pixels and 200 pixels using grid-auto-rows.

In der folgenden Demo können Sie weitere Elemente hinzufügen und die Auswirkung von grid-auto-rows sehen.

Browser-Unterstützung

Weitere Informationen

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.
Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .