grid-template-rows

Exemple interactif

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>Un</div>
      <div>Deux</div>
      <div>Trois</div>
      <div>Quatre</div>
      <div>Cinq</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;
}

Syntaxe

/* Valeur avec un mot-clé */
grid-template-rows: none;

/* Valeurs de type <track-list> */
grid-template-rows: 100px 1fr;
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;

/* Valeurs de type <auto-track-list> */
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];

/* Valeurs globales */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;

Cette propriété peut être définie avec :

• soit la valeur mot-clé none.
• soit une valeur <track-list>.
• soit une valeur <auto-track-list>.

Valeurs

none

Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle ligne sera générée implicitement et sa taille sera déterminée grâce à la propriété grid-auto-rows.

[line-name]

Un identifiant (<custom-ident>) qui définit un nom pour la ligne à cet emplacement. L'identifiant peut être n'importe quelle chaîne valide sauf les mots réservés span et auto. Les lignes peuvent avoir plusieurs noms séparés par un espace à l'intérieur des crochets, par exemple [ligne-a ligne-b].

<length>

Un longueur positive.

<percentage>

Un pourcentage positif (<percentage>) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme auto.

<flex>

Une dimension non négative avec l'unité fr qui indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <flex> occupe une part de l'espace restant proportionnelle à son facteur de flexibilité. Lorsqu'elle apparaît en dehors de la notation minmax(), elle implique un minimum automatique (c'est-à-dire minmax(auto, <flex>)).

max-content

Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.

min-content

Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.

minmax(min, max)

Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.

auto

En tant que valeur maximale, cela représente la plus grande taille max-content des éléments de cette piste.

En tant que valeur minimale, cela représente la plus grande taille minimale des éléments de cette piste (définie par les propriétés min-width/min-height des éléments). Cela correspond souvent à la taille min-content, mais pas toujours.

Si utilisé en dehors de la notation minmax(), auto représente l'intervalle entre les valeurs minimale et maximale décrites ci-dessus. Dans la plupart des cas, cela se comporte comme minmax(min-content,max-content).

Note : Les tailles de piste auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés align-content et justify-content. Par conséquent, par défaut, une piste dimensionnée en auto occupera tout l'espace restant dans le conteneur de grille.

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

Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée comme pour auto (i.e. minmax(auto, max-content)) sauf que la taille de la piste est ramenée à argument si elle est plus grande que le minimum fourni par auto.

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

Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.

masonry Expérimental

La valeur masonry indique que cet axe doit être mis en page selon l'algorithme de compartimentation.

subgrid

La valeur subgrid indique que la grille adoptera la portion englobante de la grille parente sur cet axe. Plutôt que d'être définies explicitement, les tailles des lignes/colonnes de la grille seront reprises de la définition de la grille parente.

Définition formelle

Syntaxe formelle

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,∞]>  

Exemples

Définir la taille des lignes de grille

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;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété grid-template-columns
• La propriété grid-template-areas
• La propriété raccourcie grid-template
• Les concepts de base pour les grilles CSS : les pistes
• Vidéo : définir une grille ^(angl.)
• Les sous-grilles