CSS grid-template-rows-Eigenschaft

Die Eigenschaft grid-template-rows definiert die Größe der Zeilen in einem Grid-Layout. Die Anzahl der Zeilen wird durch die Anzahl der angegebenen Werte bestimmt, kann aber auch mit repeat() zusammen mit auto-fill oder auto-fit gesteuert werden. Die Werte werden durch Leerzeichen getrennt, und jeder Wert legt die Größe der Zeilenspur fest.

INFO

Neben den Hauptwerten gibt es zusätzliche Werte wie fit-content und repeat(), die dabei helfen, flexible und kompakte Grid-Layouts zu erstellen.

Initial Value	none
Applies to	Grid containers.
Inherited	No.
Animatable	Yes. The size of the rows is animatable.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridTemplateRows = "20px 100px";

Syntax

CSS grid-template-rows syntax

css

grid-template-rows: none | auto | max-content | min-content | <flex> | fit-content | repeat(...) | <length> | <percentage> | minmax() | subgrid | auto-fill | auto-fit;

Hinweis: initial und inherit sind standardmäßige CSS-Schlüsselwörter zum Zurücksetzen oder Vererben von Werten, werden in modernen Grid-Layouts jedoch nur selten benötigt.

Example of the grid-template-rows property:

CSS grid-template-rows code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        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>Grid-template-rows property example</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>

Try it Yourself »

Result

CSS grid-template-rows example result

Example of the grid-template-rows property with the specified size of rows:

CSS grid-template-rows another code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 100px 300px;
        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>Grid-template-rows property example</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>

Try it Yourself »

Values

Value	Description
none	Dies ist der Standardwert der Eigenschaft.
auto	Die Größe der Zeile wird durch ihren Inhalt oder den verfügbaren Platz bestimmt.
max-content	Die Größe jeder Zeile wird durch die größte intrinsische Größe ihrer Elemente bestimmt.
min-content	Die Größe jeder Zeile wird durch die kleinste intrinsische Größe ihrer Elemente bestimmt.
minmax(min, max)	Definiert eine Spurgröße als Größenbereich, der größer oder gleich `min` und kleiner oder gleich `max` ist. Fungiert als Funktion zur Spurgrößenbestimmung.
`<length>`	Die Größe der Zeilen wird durch einen Längenwert angegeben.
`<percentage>`	Die Größe der Zeilen wird durch Prozentsätze angegeben.
`<flex>`	Eine nicht negative Dimension mit der Einheit `fr` (Anteil des verfügbaren Platzes), die den Flex-Faktor der Spur angibt. Jede `<flex>`-große Spur teilt sich den verbleibenden Platz proportional zu ihrem Flex-Faktor.
fit-content	Repräsentiert `min(max-content, max(auto, argument))`. Ähnlich wie `auto` (`minmax(auto, max-content)`), stellt aber sicher, dass die Spurgröße mindestens dem angegebenen Argument entspricht.
repeat(...)	Repräsentiert einen wiederholten Abschnitt der Spurliste und ermöglicht es, eine große Anzahl von Zeilen mit wiederkehrendem Muster in kompakterer Form zu schreiben. Dieser Wert wird von modernen Browsern weitgehend unterstützt.
subgrid	Gibt an, dass das Grid den überspannten Teil seines übergeordneten Grids in der angegebenen Achse übernimmt. Die Größen der Grid-Zeilen/-Spalten werden aus der Definition des übergeordneten Grids übernommen.
auto-fill	Platziert so viele passende Zeilen wie möglich im Grid, ohne den Container zu überlaufen.
auto-fit	Ähnlich wie `auto-fill`, reduziert jedoch leere Spuren auf die Größe null.
initial	Veranlasst die Eigenschaft, ihren Standardwert zu verwenden.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Practice

What does the grid-template-rows property in CSS do?

It defines the number of rows in a grid layout.It specifies the size(s) of the rows in a grid layout.It creates the grid layout in CSS.It controls the amount of space between each row in a grid layout.It defines the order of layers in a grid layout.

CSS grid-template-rows-Eigenschaft ​

Syntax ​

Example of the grid-template-rows property: ​

Result ​

Example of the grid-template-rows property with the specified size of rows: ​

Values ​