grid-template-rows

Probieren Sie es aus

grid-template-rows: auto;

grid-template-rows: 40px 4em 40px;

grid-template-rows: 1fr 2fr 1fr;

grid-template-rows: 3ch auto minmax(10px, 60px);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 100px 1fr;
grid-template-rows: [line-name] 100px;
grid-template-rows: [line-name1] 100px [line-name2 line-name3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* <auto-track-list> values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-rows:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;

Diese Eigenschaft kann wie folgt angegeben werden:

• entweder als Schlüsselwortwert none
• oder als <track-list> Wert
• oder als <auto-track-list> Wert.

Werte

none

Ein Schlüsselwort, das bedeutet, dass es kein explizites Grid gibt. Alle Reihen werden implizit generiert und ihre Größe wird durch die Eigenschaft grid-auto-rows bestimmt.

[line-name]

Ein <custom-ident>, das einen Namen für die Linie an dieser Stelle angibt. Die Identifikation kann jede gültige Zeichenkette außer den reservierten Wörtern span und auto sein. Linien können mehrere Namen haben, die durch ein Leerzeichen in den eckigen Klammern getrennt sind, zum Beispiel [line-name-a line-name-b].

<length>

Eine nicht-negative Länge.

<percentage>

Ein nicht-negativer <percentage> Wert, relativ zur Blockgröße des Grid-Containers. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, behandelt der Browser den Prozentsatz als auto zur Berechnung der intrinsischen Größe des Grid-Containers. Der Prozentsatz wird dann bezogen auf die resultierende Größe des Grid-Containers für die Layoutgestaltung des Grids und seiner Elemente aufgelöst. Der Browser kann die intrinsischen Größenbeiträge des Tracks zur Größe des Grid-Containers anpassen und die endgültige Größe des Tracks um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu erfüllen.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks angibt. Jeder <flex>-große Track nimmt einen Anteil des verbleibenden Platzes proportional zu seinem Flex-Faktor ein. Wenn er außerhalb einer minmax() Notation erscheint, impliziert er ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Grid-Elemente darstellt, die den Grid-Track belegen.

min-content

Ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Grid-Elemente darstellt, die den Grid-Track belegen.

minmax(min, max)

Eine funktionale Notation, die einen Größenbereich definiert, der größer oder gleich min und kleiner oder gleich max ist. Wenn max kleiner als min ist, wird max ignoriert und die Funktion als min behandelt. Als Maximum setzt ein <flex> Wert den Flex-Faktor des Tracks. Es ist als Minimum ungültig.

auto

Als Maximalwert repräsentiert es die größte max-content Größe der Elemente in diesem Track.

Als Mindestwert repräsentiert es die größte Mindestgröße von Elementen in diesem Track (angegeben durch die min-width/min-height Eigenschaften der Elemente). Dies entspricht oft der min-content Größe, aber nicht immer.

Wenn außerhalb der minmax() Notation verwendet, repräsentiert auto den Bereich zwischen den oben beschriebenen Mindest- und Maximalwerten. In den meisten Fällen verhält sich dies ähnlich wie minmax(min-content, max-content).

Hinweis: auto Track-Größen (und nur auto Track-Größen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt ein auto-großer Track standardmäßig jeden verbleibenden Raum im Grid-Container ein.

fit-content( [ <length> | <percentage> ] )

Repräsentiert die Formel min(max-content, max(auto, argument)), die ähnlich wie auto berechnet wird (d.h. minmax(auto, max-content)), außer dass die Track-Größe bei argument eingeklemmt wird, wenn es größer als das auto Minimum ist.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Repräsentiert ein wiederholtes Fragment der Track-Liste, das eine große Anzahl von Reihen, die ein wiederkehrendes Muster aufweisen, in kompakterer Form ermöglicht.

masonry

Gibt an, dass diese Achse nach dem Masonry-Algorithmus layoutiert werden soll.

subgrid

Gibt an, dass das Grid den überspannten Teil des Elterngrids auf dieser Achse übernimmt. Anstatt explizit spezifiziert zu werden, werden die Größen der Grid-Reihen/Spalten aus der Definition des Elterngrids übernommen.

Formale Definition

Formaler Syntax

grid-template-rows = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

Beispiele

Angabe von Grid-Reihengrößen

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• grid-template-columns
• grid-template-areas
• grid-template
• Grundkonzepte des Grid-Layouts: Grid-Tracks
• Video: Definieren eines Grids
• Subgrid