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 Raster gibt. Jegliche 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. Der Identifikator kann jeder gültige String sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die innerhalb der eckigen Klammern durch ein Leerzeichen getrennt sind, zum Beispiel [line-name-a line-name-b].

<length>

Eine nicht-negative Länge.

<percentage>

Ein nicht-negativer <percentage>-Wert, bezogen auf die Blockgröße des Rastercontainers. Wenn die Größe des Rastercontainers von der Größe seiner Spuren abhängt, behandelt der Browser den Prozentwert als auto für die Berechnung der intrinsischen Größe des Rastercontainers. Der Prozentsatz wird dann auf die resultierende Größe des Rastercontainers angewendet, um das Raster und seine Elemente zu layouten. Der Browser kann die intrinsischen Größenbeiträge der Spur an die Größe des Rastercontainers 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 Raumes proportional zu ihrem Flexfaktor ein. Wenn außerhalb einer minmax()-Notation erscheinend, impliziert es ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Rasterelemente, die die Rasterspur belegen, bezeichnet.

min-content

Ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Rasterelemente, die die Rasterspur belegen, bezeichnet.

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 ist als min, wird max ignoriert und die Funktion wird als min behandelt. Als Maximum setzt ein <flex>-Wert den Flexfaktor der Spur. Es ist als Minimum ungültig.

auto

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

Als Minimalwert repräsentiert es die größte Minimalgröße der Elemente in dieser Spur (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 Minimal- und Maximalwerten. 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 align-content- und justify-content-Eigenschaften gestreckt werden. Daher nimmt eine auto-große Spur standardmäßig jeden verbleibenden Raum im Rastercontainer 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 ist, wenn dieser größer ist als das auto-Minimum.

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 Reihen, die ein wiederkehrendes Muster aufweisen, in kompakter Form zu schreiben.

masonry

Gibt an, dass diese Achse gemäß dem „Masonry“-Algorithmus ausgelegt werden sollte.

subgrid

Gibt an, dass das Raster den über die Spanne reichenden Abschnitt des Elterraster in dieser Achse übernehmen wird. Anstatt explizit spezifiziert zu werden, werden die Größen der Rasterzeilen/-spalten von der Definition des Elterraster ü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>  

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

Beispiele

Festlegen von Rasterzeilengröß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 Rasters: Rasterspuren
• Video: Definieren eines Rasters
• Subgrid