grid-template-columns

Exemple interactif

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>Un</div>
      <div>Deux</div>
      <div>Trois</div>
      <div>Quatre</div>
      <div>Cinq</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntaxe

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

/* Valeurs de type <track-list> */
grid-template-columns: 100px 1fr;
grid-template-columns: [line-name] 100px;
grid-template-columns: [line-name1] 100px [line-name2 line-name3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* Valeurs de type <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:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-columns:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Valeurs globales */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
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>

Une longueur positive, indiquant la largeur de la colonne.

<percentage>

Un pourcentage positif (<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. Cette valeur est invalide en tant que minimum.

auto

En tant que valeur maximale, cela représente la plus grande taille max-content des éléments de cette piste.

En tant que valeur minimale, cela représente la plus grande taille minimale des éléments de cette piste (définie par les propriétés min-width/min-height des éléments). Cela correspond souvent à la taille min-content, mais pas toujours.

Si utilisé en dehors de la notation minmax(), auto représente l'intervalle entre les valeurs minimale et maximale décrites ci-dessus. Dans la plupart des cas, cela se comporte comme minmax(min-content,max-content).

Note : Les tailles de piste auto (et uniquement celles-ci) peuvent être étirées grâce aux propriétés align-content et justify-content. Par conséquent, par défaut, une piste dimensionnée en auto occupera tout l'espace restant dans le conteneur de grille.

fit-content( [ <length> | <percentage> ] )

Représente la formule max(minimum, min(limit, max-content)), où minimum représente un minimum auto (qui est souvent, mais pas toujours, égal à un minimum min-content), et limit est la fonction de dimensionnement de piste passée en argument à fit-content(). Cela est essentiellement calculé comme la plus petite valeur entre minmax(auto, max-content) et minmax(auto, limit).

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.

masonry Expérimental

La valeur masonry indique que cet axe doit être mis en page selon l'algorithme de compartimentation.

subgrid

La valeur subgrid indique que la grille adoptera la portion englobante de la grille parente sur cet axe. Plutôt que d'être définies explicitement, les tailles des lignes/colonnes de la grille seront reprises de la définition de la grille parente.

Définition formelle

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>? <track-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>  

<integer> = 
  <number-token>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

Exemples

Définir la taille des colonnes de grille

HTML

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

CSS

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

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété grid-template-rows
• La propriété grid-template-areas
• La propriété raccourcie grid-template
• Les concepts de base pour les grilles CSS : les pistes
• Vidéo : définir une grille ^(angl.)
• Les sous-grilles