CSS grid-auto-rows Eigenschaft
Die CSS-Eigenschaft grid-auto-rows legt die Größe von Zeilen fest. Erfahren Sie mehr über die Werte und probieren Sie Beispiele aus.
Die Eigenschaft grid-auto-rows legt die Größe (Höhe) von impliziten Grid-Zeilen fest — Zeilen, die der Browser automatisch erstellt, wenn Elemente außerhalb der mit grid-template-rows definierten Zeilen platziert werden. Sie hat keinen Einfluss auf explizite Zeilen, die bereits eine Größe besitzen.
Diese Seite erklärt, was eine implizite Zeile ist, listet alle Werte auf, die grid-auto-rows akzeptiert, und zeigt ausführbare Beispiele für jeden Wert.
Implizite vs. explizite Zeilen
Ein Grid kennt zwei Arten von Tracks:
- Explizite Zeilen — die mit
grid-template-rowsdeklarierten Zeilen. Ihre Größe ist durch diese Deklaration festgelegt. - Implizite Zeilen — zusätzliche Zeilen, die das Grid bei Bedarf erzeugt. Sie entstehen, wenn mehr Elemente vorhanden sind (oder Elemente weiter unten positioniert werden), als die expliziten Zeilen aufnehmen können.
grid-template-rows bestimmt die Größe der expliziten Zeilen; grid-auto-rows bestimmt die Größe der impliziten. Das ist der Hauptgrund für den Einsatz dieser Eigenschaft: Wenn die Anzahl der Zeilen unbekannt oder wachsend ist (ein Feed, eine Galerie, eine Liste), sorgt sie dafür, dass jede automatisch erstellte Zeile eine einheitliche Höhe hat, anstatt auf auto zurückzufallen.
Die Richtung, in der neue Zeilen hinzugefügt werden, wird durch grid-auto-flow gesteuert; das Spaltenäquivalent dieser Eigenschaft ist grid-auto-columns.
Diese Eigenschaft akzeptiert folgende Werte: auto, max-content, min-content, minmax(), einen <length>-Wert, einen <percentage>-Wert und einen Flex-Wert (fr).
| Anfangswert | auto |
|---|---|
| Gilt für | Grid-Container. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Größe der Zeilen ist animierbar. |
| Version | CSS Grid Layout Module Level 1 |
| DOM-Syntax | object.style.gridAutoRows = "40px"; |
Syntax
Syntax der CSS-Eigenschaft grid-auto-rows
grid-auto-rows: auto | max-content | min-content | <length> | <percentage> | <flex> | initial | inherit;Beispiel der grid-auto-rows-Eigenschaft:
Beispiel der CSS-Eigenschaft grid-auto-rows mit auto- und Längenwerten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 {
grid-area: 1 / 1 / 2 / 2;
}
.box2 {
grid-area: 1 / 2 / 2 / 3;
}
.box3 {
grid-area: 1 / 3 / 2 / 4;
}
.box4 {
grid-area: 2 / 1 / 3 / 2;
}
.box5 {
grid-area: 2 / 2 / 3 / 3;
}
.box6 {
grid-area: 2 / 3 / 3 / 4;
}
.auto-box1 {
grid-area: 1 / 1 / 2 / 2;
}
.auto-box2 {
grid-area: 1 / 2 / 2 / 3;
}
.auto-box3 {
grid-area: 1 / 3 / 2 / 4;
}
.auto-box4 {
grid-area: 2 / 1 / 3 / 2;
}
.auto-box5 {
grid-area: 2 / 2 / 3 / 3;
}
.auto-box6 {
grid-area: 2 / 3 / 3 / 4;
}
.grid-container {
display: grid;
grid-auto-rows: 100px;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
.auto-container {
display: grid;
grid-auto-rows: auto;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.auto-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-auto-rows property example</h2>
<h3>100 pixels</h3>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
<h3>auto</h3>
<div class="auto-container">
<div class="auto-box1">1</div>
<div class="auto-box2">2</div>
<div class="auto-box3">3</div>
<div class="auto-box4">4</div>
<div class="auto-box5">5</div>
<div class="auto-box6">6</div>
</div>
</body>
</html>Ergebnis
Beispiel der grid-auto-rows-Eigenschaft mit mehreren Werten
Beispiel der CSS-Eigenschaft grid-auto-rows mit Längen-, Prozent-, auto-, min-content- und max-content-Werten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 {
grid-area: 1 / 1 / 2 / 2;
}
.box2 {
grid-area: 1 / 2 / 2 / 3;
}
.box3 {
grid-area: 1 / 3 / 2 / 4;
}
.box4 {
grid-area: 2 / 1 / 3 / 2;
}
.box5 {
grid-area: 2 / 2 / 3 / 3;
}
.box6 {
grid-area: 2 / 3 / 3 / 4;
}
.grey-box1 {
grid-area: 1 / 1 / 2 / 2;
}
.grey-box2 {
grid-area: 1 / 2 / 2 / 3;
}
.grey-box3 {
grid-area: 1 / 3 / 2 / 4;
}
.grey-box4 {
grid-area: 2 / 1 / 3 / 2;
}
.grey-box5 {
grid-area: 2 / 2 / 3 / 3;
}
.grey-box6 {
grid-area: 2 / 3 / 3 / 4;
}
.auto-box1 {
grid-area: 1 / 1 / 2 / 2;
}
.auto-box2 {
grid-area: 1 / 2 / 2 / 3;
}
.auto-box3 {
grid-area: 1 / 3 / 2 / 4;
}
.auto-box4 {
grid-area: 2 / 1 / 3 / 2;
}
.auto-box5 {
grid-area: 2 / 2 / 3 / 3;
}
.auto-box6 {
grid-area: 2 / 3 / 3 / 4;
}
.min-box1 {
grid-area: 1 / 1 / 2 / 2;
}
.min-box2 {
grid-area: 1 / 2 / 2 / 3;
}
.min-box3 {
grid-area: 1 / 3 / 2 / 4;
}
.min-box4 {
grid-area: 2 / 1 / 3 / 2;
}
.min-box5 {
grid-area: 2 / 2 / 3 / 3;
}
.min-box6 {
grid-area: 2 / 3 / 3 / 4;
}
.max-box1 {
grid-area: 1 / 1 / 2 / 2;
}
.max-box2 {
grid-area: 1 / 2 / 2 / 3;
}
.max-box3 {
grid-area: 1 / 3 / 2 / 4;
}
.max-box4 {
grid-area: 2 / 1 / 3 / 2;
}
.max-box5 {
grid-area: 2 / 2 / 3 / 3;
}
.max-box6 {
grid-area: 2 / 3 / 3 / 4;
}
.grid-container {
display: grid;
grid-auto-rows: 150px;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #888;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.grey-container {
display: grid;
grid-auto-rows: 30%;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grey-container > div {
background-color: #888;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.auto-container {
display: grid;
grid-auto-rows: auto;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.auto-container > div {
background-color: #888;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.min-container {
display: grid;
grid-auto-rows: min-content;
gap: 10px;
background-color: #000;
padding: 10px;
}
.min-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.max-container {
display: grid;
grid-auto-rows: max-content;
gap: 10px;
background-color: #000;
padding: 10px;
}
.max-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-auto-rows property example</h2>
<p>Use the <strong>grid-auto-rows</strong> property to set a default size (height) for all rows.</p>
<h3>150 pixels</h3>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
<h3>30%</h3>
<div class="grey-container">
<div class="grey-box1">1</div>
<div class="grey-box2">2</div>
<div class="grey-box3">3</div>
<div class="grey-box4">4</div>
<div class="grey-box5">5</div>
<div class="grey-box6">6</div>
</div>
<h3>auto</h3>
<div class="auto-container">
<div class="auto-box1">1</div>
<div class="auto-box2">2</div>
<div class="auto-box3">3</div>
<div class="auto-box4">4</div>
<div class="auto-box5">5</div>
<div class="auto-box6">6</div>
</div>
<h3>min-content</h3>
<div class="min-container">
<div class="min-box1">1</div>
<div class="min-box2">2</div>
<div class="min-box3">3</div>
<div class="min-box4">4</div>
<div class="min-box5">5</div>
<div class="min-box6">6</div>
</div>
<h3>max-content</h3>
<div class="max-container">
<div class="max-box1">1</div>
<div class="max-box2">2</div>
<div class="max-box3">3</div>
<div class="max-box4">4</div>
<div class="max-box5">5</div>
<div class="max-box6">6</div>
</div>
</body>
</html>Beispiel der grid-auto-rows-Eigenschaft mit dem "minmax"-Wert
Beispiel der grid-auto-rows-Eigenschaft mit einem minmax()-Wert
Die Funktion minmax(min, max) verleiht jeder impliziten Zeile eine flexible Höhe: Sie schrumpft nie unter min und wächst nie über max hinaus. Hier ist jede automatische Zeile mindestens 90px hoch, aber nicht höher als 4cm.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box1 {
grid-area: 1 / 1 / 2 / 2;
}
.box2 {
grid-area: 1 / 2 / 2 / 3;
}
.box3 {
grid-area: 1 / 3 / 2 / 4;
}
.box4 {
grid-area: 2 / 1 / 3 / 2;
}
.box5 {
grid-area: 2 / 2 / 3 / 3;
}
.box6 {
grid-area: 2 / 3 / 3 / 4;
}
.minmax1 {
grid-area: 1 / 1 / 2 / 2;
}
.minmax2 {
grid-area: 1 / 2 / 2 / 3;
}
.minmax3 {
grid-area: 1 / 3 / 2 / 4;
}
.minmax4 {
grid-area: 2 / 1 / 3 / 2;
}
.minmax5 {
grid-area: 2 / 2 / 3 / 3;
}
.minmax6 {
grid-area: 2 / 3 / 3 / 4;
}
.grid-container {
display: grid;
grid-auto-rows: 100px;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #666;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
.minmax-container {
display: grid;
grid-auto-rows: minmax(90px, 4cm);
gap: 10px;
background-color: #cccccc;
padding: 10px;
}
.minmax-container > div {
background-color: #f5f5f5;
text-align: center;
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Grid-auto-rows property example</h2>
<h3>100 pixels</h3>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
<h3>minmax</h3>
<div class="minmax-container">
<div class="minmax1">1</div>
<div class="minmax2">2</div>
<div class="minmax3">3</div>
<div class="minmax4">4</div>
<div class="minmax5">5</div>
<div class="minmax6">6</div>
</div>
</body>
</html>Hier legt grid-auto-rows eine Standardhöhe für jede implizite Zeile fest, während minmax() diese Höhe flexibel zwischen einer Unter- und einer Obergrenze hält.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Die Größe jeder Zeile wird durch ihren Inhalt bestimmt. Dies ist der Standardwert der Eigenschaft. | Play it » |
| max-content | Die Größe jeder Zeile richtet sich nach dem größten Element in der Zeile. | Play it » |
| min-content | Die Größe jeder Zeile richtet sich nach dem kleinsten Element in der Zeile. | Play it » |
| minmax(min, max) | Der Größenbereich ist größer oder gleich "min" und kleiner oder gleich "max". | Play it » |
<length> | Die Größe der Zeilen wird durch einen Längenwert angegeben. | Play it » |
<percentage> | Die Größe der Zeilen wird in Prozent angegeben. | Play it » |
<flex> | Eine nicht-negative Dimension mit der Einheit "fr", die den Flex-Faktor des Tracks angibt. Jeder <flex>-bemessene Track teilt sich den verbleibenden Platz proportional zu seinem Flex-Faktor. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
grid-template-rows— bestimmt die Größe der expliziten Zeilen;grid-auto-rowsdimensioniert nur die darüber hinaus erstellten Zeilen.grid-auto-columns— das Spaltenäquivalent: dimensioniert implizite Spalten.grid-auto-flow— steuert, ob das Grid Elemente automatisch in neue Zeilen oder neue Spalten einfügt.grid— die Kurzschreibweise, mit der all diese Eigenschaften auf einmal gesetzt werden können.
Übung
Übung
Welche Funktion hat die Eigenschaft 'grid-auto-rows' im CSS Grid Layout?
Was this page helpful?