Propriété CSS grid-template-rows

La propriété grid-template-rows définit la taille des lignes dans une grille. Le nombre de lignes est déterminé par le nombre de valeurs fournies, mais il peut aussi être contrôlé à l’aide de repeat() avec auto-fill ou auto-fit. Les valeurs sont séparées par des espaces, et chaque valeur spécifie la taille de la piste de ligne.

INFO

En plus des valeurs principales, il existe des valeurs supplémentaires comme fit-content et repeat() qui aident à créer des mises en page en grille flexibles et compactes.

Initial Value	none
Applies to	Grid containers.
Inherited	No.
Animatable	Yes. The size of the rows is animatable.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridTemplateRows = "20px 100px";

Syntaxe

Syntaxe de CSS grid-template-rows

css

grid-template-rows: none | auto | max-content | min-content | <flex> | fit-content | repeat(...) | <length> | <percentage> | minmax() | subgrid | auto-fill | auto-fit;

Remarque : initial et inherit sont des mots-clés CSS standard pour réinitialiser ou hériter des valeurs, mais ils sont rarement nécessaires dans les mises en page en grille modernes.

Exemple de la propriété grid-template-rows :

Exemple de code CSS grid-template-rows

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 30px;
      }
      .auto-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-rows property example</h2>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS grid-template-rows example result

Exemple de la propriété grid-template-rows avec la taille spécifiée des lignes :

Autre exemple de code CSS grid-template-rows

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 100px 300px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-rows property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Value	Description
none	Il s’agit de la valeur par défaut de la propriété.
auto	La taille de la ligne est déterminée par son contenu ou l’espace disponible.
max-content	La taille de chaque ligne est déterminée par la plus grande taille intrinsèque de ses éléments.
min-content	La taille de chaque ligne est déterminée par la plus petite taille intrinsèque de ses éléments.
minmax(min, max)	Définit la taille d’une piste comme une plage de tailles supérieure ou égale à `min` et inférieure ou égale à `max`. Fonctionne comme une fonction de dimensionnement de piste.
`<length>`	La taille des lignes est spécifiée par une valeur de longueur.
`<percentage>`	La taille des lignes est spécifiée par des pourcentages.
`<flex>`	Une dimension non négative avec l’unité `fr` (fraction de l’espace disponible) qui spécifie le facteur flexible de la piste. Chaque piste de taille `<flex>` partage l’espace restant proportionnellement à son facteur flexible.
fit-content	Représente `min(max-content, max(auto, argument))`. Similaire à `auto` (`minmax(auto, max-content)`), mais garantit que la taille de la piste est au moins égale à l’argument fourni.
repeat(...)	Représente un fragment répété de la liste des pistes, permettant d’écrire un grand nombre de lignes présentant un motif récurrent sous une forme plus compacte. Cette valeur est largement prise en charge dans les navigateurs modernes.
subgrid	Indique que la grille adoptera la portion de sa grille parente couverte dans l’axe spécifié. Les tailles des lignes/colonnes de la grille sont reprises de la définition de la grille parente.
auto-fill	Place autant de lignes pouvant tenir que possible dans la grille sans déborder du conteneur.
auto-fit	Similaire à `auto-fill`, mais réduit les pistes vides à une taille nulle.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Practice

What does the grid-template-rows property in CSS do?

It defines the number of rows in a grid layout.It specifies the size(s) of the rows in a grid layout.It creates the grid layout in CSS.It controls the amount of space between each row in a grid layout.It defines the order of layers in a grid layout.

Propriété CSS grid-template-rows ​

Syntaxe ​

Exemple de la propriété grid-template-rows : ​

Résultat ​

Exemple de la propriété grid-template-rows avec la taille spécifiée des lignes : ​

Valeurs ​