Propriété CSS grid-template-rows

La propriété grid-template-rows définit la taille des lignes de la grille.

En plus des valeurs principales, il y a deux autres valeurs qui sont une téchnologie expérimentale: "fit-content" et "repeat".

Valeur initiale	none
Appliquée à	Conteneur de la grille.
Héritée	Non.
Animable	Oui. La taille des lignes est animable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridTemplateRows = "20px 100px";

Syntaxe

grid-template-rows: none | auto | max-content | min-content | flex | fit-content| repeat | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .auto-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: auto auto;
      grid-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>Exemple de la propriété grid-template-rows</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>

Essayez-vous-même!

Dans cet exemple, la taille de la première ligne est 100px, et celle de la deuxième est 300px:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: 100px 300px;
      grid-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>Propriété de l'exemple grid-template-rows </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>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	La taille des lignes occupe la taille du conteneur. C'est la valeur initiale de cette propriété.
max-content	La taille de chaque ligne dépend du plus grand élément sur les lignes.
min-content	La taille de chaque ligne dépend du plus petit élément sur les lignes.
minmax(min.max)	L'intervalle de la taille est supérieur ou égal à "min" et inférieur ou égal à "max".
<length>	La taille des lignes est spécifiée par la valeur length.
<percentage>	La taille des lignes est spécifiée en pourcentages.
<flex>	Une dimension positive avec l'unité "fr" qui spécifie le facteur de flexibilité de la piste. Chaque piste de la taille <flex> occupera une partie de l'espace restant en fonction de ce facteur.
fit-content	Représente le min (max-content, max(auto, argument)), qui est similaire à auto (i.e. minmax(auto, max-content)), mais la taille est supérieure à minimum fourni par auto. Cette valeur est considérée comme expérimentale.
repeat	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. La valeur est considérée comme expérimentale.
initial	Fait la propriété utiliser sa valeur initiale.
inherit	Hérite la propriété de son élément parent.