Propriété CSS grid-template-columns
Exemple
Créez un conteneur de grille à 4 colonnes :
.grid-container {
display: grid;
grid-template-columns:
auto auto auto auto;
}
Définition et utilisation
La grid-template-columns
propriété spécifie le nombre (et la largeur) des colonnes dans une disposition en grille.
Les valeurs sont une liste séparée par des espaces, où chaque valeur spécifie la taille de la colonne respective.
Valeur par défaut: | rien |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | Module de disposition de grille CSS niveau 1 |
Syntaxe JavaScript : | objet .style.gridTemplateColumns="50px 50px 50px" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Property | |||||
---|---|---|---|---|---|
grid-template-columns | 57 | 16 | 52 | 10 | 44 |
Syntaxe CSS
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
none | Default value. Columns are created if needed | |
auto | The size of the columns is determined by the size of the container and on the size of the content of the items in the column | |
max-content | Sets the size of each column to depend on the largest item in the column | |
min-content | Sets the size of each column to depend on the smallest item in the column | |
length | Sets the size of the columns, by using a legal length value. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Créez un conteneur de grille à 4 colonnes et spécifiez une taille pour chaque colonne :
.grid-container {
display: grid;
grid-template-columns:
30px 200px auto 100px;
}
Pages connexes
Tutoriel CSS : Mise en page de la grille CSS
Référence CSS : La propriété grid-template-rows
Référence CSS : La propriété grid-template