Propriété CSS grid-template-columns

La propriété grid-template-columns définit la taille (largeur) de chaque colonne sur la grille.

Valeur initiale none
Appliquée à Conteneur de grille.
Héritée Non.
Animable Oui. Les colonnes sont animables.
Version CSS Grid Layout Module Level 1
Syntaxe DOM object.style.gridTemplateColumns = "40px 40px 40px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      margin-top: 20px;
      }
      .example > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-template-columns</h2>
    <div class="example">
      <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>

Un autre exemple avec la propriété grid-templates-columns:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: 40px 150px auto 80px;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-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-columns</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 colonnes occupe la taille du conteneur. C'est la valeur initiale de cette propriété.
max-content La taille de chaque colonne dépend du plus grand élément dans les colonnes.
min-content La taille de chaque colonne dépend du plus petit élément dans les colonnes.
minmax(min.max) L'intervalle de la taille est supérieur ou égal à "min" et inférieur ou égal à "max".
<length> La taille des colonnes est spécifiée par la valeur length.
<percentage> La taille des colonnes est spécifiées par pourcentages.
<flex> Une dimension positive avec l'unité "fr" qui spécifie le facteur flexible de la piste. Chaque piste de 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 à auto minimum.
Cette valeur est considérée comme expérimentale.
repeat Représente un fragment répété d'une liste de pistes et permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.
Cette valeur est considérée comme expérimentale.
initial Fait utiliser la 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