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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.