grid-template-columns
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
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.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* 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.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | conteneurs de grille |
| Héritée | non |
| Pourcentages | fait référence à la dimension correspondante de la zone de contenu |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

Syntaxe formelle
----------------
```

grid-template-columns =   
  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> ] ]\* <line-names>? <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( <inflexible-breadth> , <track-breadth> )  |  
  fit-content( <length-percentage [0,∞]> )            
  
<track-repeat> =   
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )    
  
<fixed-size> =   
  <fixed-breadth>                                   |  
  minmax( <fixed-breadth> , <track-breadth> )       |  
  minmax( <inflexible-breadth> , <fixed-breadth> )    
  
<fixed-repeat> =   
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )    
  
<auto-repeat> =   
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )    
  
<name-repeat> =   
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )    
  
<track-breadth> =   
  <length-percentage [0,∞]>  |  
  <flex [0,∞]>               |  
  min-content                |  
  max-content                |  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  |  
  min-content                |  
  max-content                |  
  auto                         
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
<fixed-breadth> =   
  <length-percentage [0,∞]>    
  
```

Exemples
--------

### CSS


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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

### HTML


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

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `grid-template-rows`
* `grid-template-areas`
* `grid-template`
* Guide : les concepts de base pour les grilles CSS : les pistes
* Tutoriel vidéo : définir une grille (en anglais)