grid-template-rows CSS property

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 angegeben werden als:

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

Werte

none

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

[line-name]

Ein <custom-ident>, der einen Namen für die Linie an diesem Ort angibt. Die Identifikation kann ein beliebiger gültiger String sein, ausgenommen die reservierten Wörter span und auto. Linien können mehrere Namen haben, getrennt durch ein Leerzeichen innerhalb der eckigen Klammern, z.B. [line-name-a line-name-b].

<length>

Eine nicht-negative Länge.

<percentage>

Ein nicht-negativer <percentage>-Wert, relativ zur Blockgröße des Gittercontainers. Wenn die Größe des Gittercontainers von der Größe seiner Spuren abhängt, behandelt der Browser den Prozentsatz für die Berechnung der intrinsischen Größe des Gittercontainers als auto. Der Prozentsatz wird dann zur Festlegung des Gitters und seiner Elemente gegen die resultierende Gittercontainergröße aufgelöst. Der Browser kann die Beiträge der intrinsischen Größe der Spur zur Größe des Gittercontainers anpassen und die endgültige Größe der Spur um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz einzuhalten.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flexfaktor der Spur angibt. Jede <flex>-große Spur nimmt einen Anteil des verbleibenden Raums proportional zu ihrem Flexfaktor ein. Wenn sie außerhalb einer minmax()-Notation erscheint, impliziert sie ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Gitterelemente, die die Spur belegen, darstellt.

min-content

Ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitterelemente, die die Spur belegen, darstellt.

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 Flexfaktor der Spur. Es ist ungültig als Minimum.

auto

Als Maximumwert repräsentiert es die größte max-content-Größe der Elemente in dieser Spur.

Als Minimumwert repräsentiert es die größte Mindestgröße der Elemente in dieser Spur (spezifiziert durch die min-width/min-height-Eigenschaften der Elemente). Dies entspricht oft der min-content-Größe, aber nicht immer.

Wenn es außerhalb einer minmax()-Notation verwendet wird, repräsentiert auto den Bereich zwischen den oben beschriebenen Mindest- und Höchstwerten. In den meisten Fällen verhält es sich ähnlich wie minmax(min-content,max-content).

Hinweis: auto-Spurgrößen (und nur auto-Spurgrößen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt eine auto-große Spur standardmäßig jeden verbleibenden Raum im Gittercontainer ein.

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

Repräsentiert die Formel min(max-content, max(auto, argument)), die ähnlich wie auto (d.h. minmax(auto, max-content)) berechnet wird, außer dass die Spurgröße auf argument begrenzt wird, wenn sie größer als das auto-Minimum ist.

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

Repräsentiert ein wiederholtes Fragment der Spurliste, das es ermöglicht, eine große Anzahl von Zeilen, die ein sich wiederholendes Muster aufweisen, in einer kompakteren Form zu schreiben.

masonry

Gibt an, dass diese Achse gemäß dem Mauerwerksalgorithmus angeordnet werden sollte.

subgrid

Gibt an, dass das Gitter den überspannten Teil seines übergeordneten Gitters in dieser Achse übernehmen wird. Anstatt explizit angegeben zu werden, werden die Größen der Gitterzeilen/-spalten aus 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>? <track-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>  

<integer> = 
  <number-token>  

<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 Rasterlayouts: Rasterspuren
• Video: Defining a grid
• Subgrid