La propriété grid-template-columns définit les noms des lignes et les fonctions de taille (track sizing) pour les colonnes de la grille.

Syntaxe

/* Valeur avec un mot-clé */
grid-template-columns: none;

/* Valeurs <track-list> */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* Valeurs <auto-track-list> */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* Valeurs globales */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

Valeurs

none
Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété grid-auto-columns.
<length>
Un longueur positive. Voir <length>.
<percentage>
Un pourcentage positif (type <percentage>) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme auto.
<flex>
Une dimension positive dont l'unité fr indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <flex> occupera une partie de l'espace restant en fonction de ce facteur.

Lorsque cette valeur apparaît en dehors de la notation minmax(), la valeur minimale auto est implicite (la valeur signifie minmax(auto, <flex>)). Voir <flex>.

max-content
Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
min-content
Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
minmax(min, max)
Une notation fonctionnelle qui définit un intervalle de taille entre min et max. Si max est inférieur à min, max est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <flex> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.
auto
Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par min-width/min-height)) des objets de la grilles qui occupe cette piste de la grille.

Note : Les pistes de taille auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés align-content et justify-content.

fit-content( [ <length> | <percentage> ] )
Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée comme pour auto (i.e. minmax(auto, max-content)) sauf que la taille de la piste est ramenée à argument si elle est plus grande que le minimum fourni par auto.
repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )
Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.

Syntaxe formelle

none | <track-list> | <auto-track-list>


<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?


<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )


<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>


<length-percentage> = <length> | <percentage>

Exemples

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Grid Layout
La définition de 'grid-template-columns' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
Valeur initialenone
Applicabilitéconteneurs de grille
Héritéenon
Pourcentagesfait référence à la dimension correspondante de la zone de contenu
Médiavisuel
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationsimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
grid-template-columnsChrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43
Support complet 43
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0
minmax()Chrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11Opera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Aucun support NonChrome Android Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43
Support complet 43
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 10.3Samsung Internet Android ?
repeat()Chrome Support complet 57
Support complet 57
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support partiel 57
Notes
Support partiel 57
Notes
Notes repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
Aucun support 52 — 57
Notes
Notes calc() doesn't work in repeat() (see bug 1350069).
Aucun support 31 — 52
Désactivée
Désactivée From version 31 until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57
Support complet 57
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference.
Chrome Android Support complet 57
Support complet 57
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 60
Support complet 60
Aucun support 52 — 60
Notes
Notes calc() doesn't work in repeat() (see bug 1350069).
Aucun support 31 — 52
Désactivée
Désactivée From version 31 until version 52 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43
Support complet 43
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 10.3Samsung Internet Android ?
fit-content()Chrome Support complet 29Edge Support complet 16Firefox Support complet 51IE Aucun support NonOpera Support complet 44Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57Firefox Android Support complet 51Opera Android Support complet 43Safari iOS Support complet 10.3Samsung Internet Android Support complet 7.0
Animation of tracksChrome Aucun support NonEdge Aucun support NonFirefox Support complet 66IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 66Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,