CSS-Eigenschaft grid-template-rows

Die Eigenschaft grid-template-rows definiert die Größe der Zeilen in einem Gitter-Layout.

Neben den Hauptwerten gibt es zwei weitere Werte, die die experimentelle Technologie sind: "fit-content" und "repeat".

Anfangswert	none
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.gridTemplateRows = "20px 100px";

Syntax

grid-template-rows: none | auto | max-content | min-content | flex | fit-content| repeat | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .auto-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: auto auto;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      margin-top: 30px;
      }
      .auto-container > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft grid-template-rows</h2>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Versuch es selber!

In diesem Beispiel ist die Größe der ersten Reihe 100px und die Größe der zweiten Reihe 300px:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: 100px 300px;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft grid-template-rows</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Versuch es selber!

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>-sizedeilt sich den verbleibenden Platz im Verhältnis zu ihrem Flexfaktor.
fit-content	Stellt den min(max-Inhalt, max(auto, Argument) dar, der dem Auto ähnlich ist (d. h. minmax(auto, max-Inhalt)), aber die Größe ist größer als das Auto-Minimum. Dieser Wert gilt als experimentell.
repeat	Stellt ein wiederholtes Fragment der Trackliste dar, so dass eine große Anzahl von Zeilen, die ein wiederkehrendes Muster aufweisen, in einer kompakteren Form geschrieben werden kann.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.