Propriété grid-template-columns CSS

Définition et utilisation

L'attribut grid-template-columns détermine le nombre de colonnes (et la largeur) dans le layout en grille.

Ces valeurs constituent une liste séparée par des espaces, où chaque valeur spécifie la taille de la colonne correspondante.

Voir également :

Tutoriel CSS :Mise en page en grille CSS

Manuel de référence CSS :Propriété grid-template-rows

Manuel de référence CSS :Propriété grid-template

Exemple

Exemple 1

Créez un conteneur de grille de quatre colonnes :

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Essayez-le vous-même

Exemple 2

Créez un layout en grille de quatre colonnes et définissez la taille de chaque colonne :

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
none Valeur par défaut. Créez des colonnes si nécessaire.
auto La taille des colonnes dépend de la taille du conteneur et de la taille des éléments du contenu dans la colonne.
max-content Définir la taille de chaque colonne en fonction de la plus grande des éléments dans la colonne.
min-content Définir la taille de chaque colonne en fonction de la plus petite des éléments dans la colonne.
length Définir la taille des colonnes en utilisant des valeurs de longueur légitimes. VoirUnités de longueur.
initial Récupère la valeur par défaut de cette propriété. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : none
Héritage : Non
Réalisation des animations : Prise en charge. Voir :Propriétés liées aux animations.
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridTemplateColumns="50px 50px 50px"

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version de navigateur complètement prise en charge de cette propriété.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44