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 der Schlüsselwortwert none
• oder ein <track-list> Wert
• oder ein <auto-track-list> Wert.

Werte

none

Ein Schlüsselwort, das bedeutet, dass kein explizites Gitter vorhanden ist. Alle Zeilen werden implizit generiert und ihre Größe wird durch die grid-auto-rows Eigenschaft bestimmt.

[line-name]

Ein <custom-ident>, das einen Namen für die Linie an dieser Stelle angibt. Die Identifikation kann jeder gültige String sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die durch Leerzeichen innerhalb der 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 für die Berechnung der intrinsischen Größe des Grid-Containers. Der Prozentsatz wird dann auf die resultierende Größe des Grid-Containers zur Anordnung des Grids und seiner Elemente angewendet. Der Browser kann die intrinsischen Größenbeiträge des Tracks an die Größe des Grid-Containers anpassen und kann die endgültige Größe des Tracks um das Minimum erhöhen, das 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 verbliebenen Raums im Verhältnis 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 Gittertrack ausfüllen.

min-content

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

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 wird als min behandelt. Als Maximum setzt ein <flex> Wert den Flex-Faktor des Tracks. Er ist als Minimum ungültig.

auto

Als Maximalwert stellt es die größte max-content Größe der Elemente in diesem Track dar.

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

Wenn es außerhalb der minmax() Notation verwendet wird, stellt auto den Bereich zwischen den oben beschriebenen Minimal- und Maximalwerten dar. 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 align-content und justify-content Eigenschaften gedehnt werden. Daher nimmt ein auto-größe Track standardmäßig jeden verbleibenden Raum im Grid-Container ein.

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

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

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

Stellt ein wiederholtes Fragment der Track-Liste dar, das es ermöglicht, eine große Anzahl von Zeilen, die ein wiederkehrendes Muster aufweisen, in einer kompakteren Form zu schreiben.

masonry

Gibt an, dass diese Achse gemäß dem Mauerwerk-Algorithmus angeordnet werden soll.

subgrid

Gibt an, dass das Gitter den überspannten Teil seines übergeordneten Gitters auf dieser Achse übernimmt. Anstatt explizit angegeben zu werden, werden die Größen der Gitterreihen/-spalten von der Definition des übergeordneten Gitters übernommen.

Formale Definition

Formale 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

Festlegen von Gitterzeilengröß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 Gitterlayouts: Gittertracks
• Video: Definieren eines Gitters
• Subgrid