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>

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>

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.

Support de Navigateurs

57.0+ 16.0+ 52.0+ 10.1+ 44.0+


Trouvez-vous cela utile?

Articles Associées