w3docs logo

CSS-Eigenschaft grid-auto-rows

Die Eigenschaft grid-auto-rows definiert die Größe für die Zeilen in einem Gittercontainer.

Diese Eigenschaft hat folgende Werte: auto, max-content, min-content, minmax, length und percentages.

Anfangswert auto
Gilt für Gitter-Containers
Geerbt Nein
Animierbar Ja, die Größe der Zeilen ist animierbar.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridAutoRows = "40px";

Syntax

grid-auto-rows: auto | max-content | min-content | <length> | <percentage> | <flex> | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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;
      grid-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;
      grid-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>Ein Beispiel für die Eigenschaft Grid-auto-rows</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>

Lassen Sie uns ein anderes Beispiel mit mehreren Werten sehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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;
      grid-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%;
      grid-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;
      grid-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;
      grid-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;
      grid-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>Ein Beispiel für die Eigenschaft Grid-auto-rows</h2>
    <p>Verwenden Sie die Eigenschaft <strong>grid-auto-rows</strong>, um eine Standardgröße (Höhe) für alle Zeilen zu definieren.</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>

Werte

Wert Beschreibung
auto Die Größe der Zeilen nimmt die Größe des Containers ein. Das ist der Standardwert der Eigenschaft.
max-content Die Größe jeder Zeile hängt vom größten Element in den Zeilen ab.
min-content Die Größe jeder Zeile hängt vom kleinsten Element in den Zeilen ab.
minmax(min.max) Der Größenbereich ist größer oder gleich "min" und kleiner oder gleich "max".
<length> Die Größe der Zeilen wird durch den Längenwert angegeben.
<percentage> Die Größe der Zeilen wird durch Prozentsätze angegeben.
<flex> Eine nicht-negative Dimension mit der Einheit "fr" , die den Flexfaktor der Spur angibt. Jede <flex>-sized Pfad teilt sich den verbleibenden Platz im Verhältnis zu ihrem Flexfaktor.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
57+ 16+ 52+ 44+ 10.1+

Übe dein Wissen

Was definiert die CSS-Eigenschaft 'grid-auto-rows'?
Finden Sie das nützlich?