Propriété CSS grid-template-columns

La propriété grid-template-columns définit la taille (largeur) de chaque colonne dans la disposition en grille :

Valeur initiale	none
S'applique à	Conteneurs de grille.
Héritée	Non.
Animable	Oui. Les colonnes sont animables.
Version	Module de disposition en grille CSS Niveau 1
Syntaxe DOM	object.style.gridTemplateColumns = "40px 40px 40px";

Syntaxe

CSS grid-template-columns

css

grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;

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

Exemple de code CSS grid-template-columns

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        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>Grid-template-columns property example</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>

Try it Yourself »

Résultat

CSS grid-template-columns length

Exemple de grid-template-columns appliqué à grid-container :

Exemple de longueur CSS grid-template-columns

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 40px 150px auto 80px;
        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>Grid-template-columns 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

Valeur	Description	Tester
none	Il s'agit de la valeur par défaut de la propriété.	Tester »
auto	La taille de la piste est déterminée par son contenu, mais peut s'agrandir pour occuper l'espace disponible.	Tester »
max-content	La taille de chaque colonne dépend de l'élément le plus large de la colonne.	Tester »
min-content	La taille de chaque colonne dépend de l'élément le plus petit de la colonne.	Tester »
minmax(min, max)	La plage de taille est supérieure ou égale à « min » et inférieure ou égale à « max ».	Tester »
`<length>`	La taille des colonnes est spécifiée par une valeur de longueur.	Tester »
`<percentage>`	La taille des colonnes est spécifiée par des pourcentages.	Tester »
`<flex>`	Une dimension non négative avec l'unité « fr » qui spécifie le facteur de flexibilité de la piste. Chaque piste de taille `<flex>` partage l'espace restant proportionnellement à son facteur de flexibilité.	Tester »
fit-content	Représente min(max-content, max(auto, argument)), ce qui est similaire à auto (c'est-à-dire minmax(auto, max-content)), mais la taille est supérieure au minimum auto.	Tester »
repeat	Représente un fragment répété de la liste de pistes, permettant d'écrire un grand nombre de colonnes présentant un motif récurrent sous une forme plus compacte.	Tester »
initial	Fait utiliser à la propriété sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.	Tester »

Pratique

Quelle est la fonction de la propriété 'grid-template-columns' en CSS ?

Elle définit le nombre de lignes dans une disposition en grille.Elle est utilisée pour spécifier les noms de lignes et les fonctions de dimensionnement des pistes des colonnes de la grille.Elle aide à aligner le texte dans la disposition en grille.Elle définit la largeur et le nombre de colonnes dans une disposition en grille.Elle est utilisée pour styliser la couleur de fond de la grille.

Propriété CSS grid-template-columns ​

Syntaxe ​

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

Résultat ​

Exemple de grid-template-columns appliqué à grid-container : ​

Valeurs ​