grid-template-columns

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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.

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
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

/* Valeurs avec une liste de pistes */
/* Type <track-list>                */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];

/* 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 liées à la grille parente */
grid-template-columns: subgrid;
grid-template-columns: subgrid [linename1];
grid-template-columns: subgrid repeat(4, [linename1]);
grid-template-columns: subgrid repeat(4, [linename1 linename2]);
grid-template-columns: subgrid repeat(auto-fill, [linename1]);

/* 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.
subgrid
Un mot-clé qui indique que la grille s'alignera avec la grille parente sur cet axe. La taille des colonnes n'est pas définie explicitement mais se base sur la définition fournie par la grille parente.
<length>
Un longueur positive.
<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>)).

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. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).
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.

Syntaxe formelle

none | <track-list> | <auto-track-list> | subgrid <line-name-list>?


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


<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <track-breadth> , <track-breadth> )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> )


<track-breadth> = <length> | <percentage> | <flex> | min-content | max-content | auto
<fixed-breadth> = <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.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Support simple 29.0[1] 40.0 (40.0)[2] 10.0-ms[3] 20-ms[3] 28.0[1] Nightly build-webkit
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support Pas de support 10.0-ms[3] Pas de support Pas de support

[1] Cette fonctionnalité est implémenté via le marqueur fonctionnalités expérimentales de la Web Platform sous chrome://flags.

[2] Cette fonctionnalité est implémentée via la préférence layout.css.grid.enabled qui vaut false par défaut.

[3] Internet Explorer implémente une ancienne version de la spécification qui utilise le préfixe -ms. La propriété qui est implémentée peut être utilisée avec -ms-grid-columns.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,