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 folgendermaßen 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 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>, der einen Namen für die Linie an diesem Ort angibt. Der Identifikator kann jeder gültige String außer den reservierten Wörtern span und auto sein. Linien können mehrere Namen haben, die innerhalb der eckigen Klammern durch ein Leerzeichen getrennt sind, 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 Grid-Containers. Wenn die Größe des Grid-Containers von der Größe seiner Spuren abhängt, behandelt der Browser den Prozentsatz für die Berechnung der intrinsischen Größe des Grid-Containers als auto. Der Prozentsatz wird dann gegen die resultierende Grid-Containergröße zur Anordnung des Grids und seiner Elemente aufgelöst. Der Browser kann die intrinsischen Größenbeiträge der Spur an die Größe des Grid-Containers anpassen und die endgültige Größe der Spur um den minimalen Betrag erhöhen, der zur Achtung des Prozentsatzes erforderlich ist.

<flex>

Eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor der Spur angibt. Jede <flex>-große Spur nimmt einen Anteil des verbleibenden Raums proportional zu ihrem Flex-Faktor 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 die Grid-Spur belegenden Grid-Elemente darstellt.

min-content

Ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der die Grid-Spur belegenden Grid-Elemente 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 ist als min, wird max ignoriert und die Funktion als min behandelt. Als Maximum setzt ein <flex>-Wert den Flex-Faktor der Spur. Es ist als Minimum ungültig.

auto

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

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

Wird es 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 Eigenschaften align-content und justify-content gestreckt werden. Daher wird eine auto-große Spur standardmäßig jeden verbleibenden Platz im Grid-Container einnehmen.

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 Spurgröße auf argument begrenzt wird, wenn dieser 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 erlaubt, eine große Anzahl von Reihen mit einem wiederkehrenden Muster in kompakterer Form zu schreiben.

masonry

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

subgrid

Gibt an, dass das Grid den überspannten Teil seines übergeordneten Grids auf dieser Achse übernehmen wird. Statt explizit angegeben zu werden, werden die Größen der Grid-Reihen/Spalten aus der Definition des übergeordneten Grids ü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

Größen von Grid-Reihen spezifizieren

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
• Grundlegende Konzepte des Grid-Layouts: Grid-Spuren
• Video: Definieren eines Grids
• Subgrid