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>

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>

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.

Browser-Support

57.0+ 16.0+ 52.0+ 10.1+ 44.0+


Finden Sie das nützlich?

Ähnliche Artikel