grid-template-columns en CSS : dessiner les colonnes sans compter les cases

Une fois qu'un conteneur porte display: grid, il reste à décider combien de colonnes il contient et quelle largeur chacune occupe. C'est exactement le rôle de grid-template-columns : sans elle, une grille se contente d'une seule colonne large comme le conteneur, ce qui n'a généralement aucun intérêt.

Cette propriété accepte plusieurs types de valeurs à la fois, des tailles fixes en pixels, des fractions avec l'unité fr, des pourcentages, ou encore la fonction repeat() pour éviter de répéter la même valeur plusieurs fois. Elle a une propriété miroir, grid-template-rows, qui fait exactement la même chose pour les lignes.

Définition

grid-template-columns définit le nombre de colonnes d'une grille CSS ainsi que la largeur de chacune, sur un élément qui porte CSS Grid. Chaque valeur donnée dans la liste correspond à une colonne : trois valeurs créent trois colonnes, une valeur seule crée une seule colonne. C'est la propriété la plus fondamentale pour dessiner la structure d'une grille, avant même de placer le moindre élément dedans.

Syntaxe et types de valeurs

.grille {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px auto;
}

Ici, la première colonne fait 200 pixels fixes, et les deux suivantes se partagent également l'espace restant grâce à l'unité unité fr. Les lignes suivent le même principe : une première ligne de 80 pixels, puis une ligne dont la hauteur s'ajuste automatiquement au contenu avec auto. Rien n'oblige à mélanger les unités, une grille en pixels fixes ou entièrement en fr est tout aussi valide.

Éviter la répétition avec repeat()

Écrire grid-template-columns: 1fr 1fr 1fr 1fr 1fr pour cinq colonnes identiques fonctionne, mais devient vite illisible et source d'erreur au moindre ajustement. La fonction repeat() et minmax() résume cette liste en repeat(5, 1fr), avec exactement le même résultat.

.grille {
  grid-template-columns: repeat(5, 1fr);
}

Combiner tailles fixes et répétition

.mise-en-page {
  grid-template-columns: 220px repeat(3, 1fr);
}

repeat() n'oblige pas à choisir entre une grille entièrement répétée et une grille entièrement écrite à la main : les deux se combinent dans la même déclaration. Ici, une première colonne fixe de 220 pixels sert de barre latérale, suivie de trois colonnes égales générées par repeat(3, 1fr). C'est un motif très courant pour une mise en page avec une seule zone particulière, un menu ou un filtre, et un contenu principal régulier à côté.

Cette souplesse évite de choisir entre deux approches radicalement différentes selon la complexité de la grille. Une grille peut très bien commencer simple, avec quelques colonnes en pixels, puis évoluer vers un mélange de valeurs fixes et de repeat() au fur et à mesure que sa structure se précise, sans jamais devoir tout réécrire depuis le début.

Un piège fréquent : oublier les lignes implicites

grid-template-columns ne fixe que les colonnes explicitement déclarées. Si le contenu déborde de ces colonnes, la grille ne crée pas automatiquement de nouvelles colonnes : elle empile le surplus dans de nouvelles lignes, dites implicites, dont la hauteur suit une règle différente réglée par grid-auto-rows.

Questions fréquentes

Oui, sans aucun problème. Une déclaration comme grid-template-columns: 100px 20% 1fr est parfaitement valide : la première colonne est fixe, la deuxième suit un pourcentage du conteneur, et la troisième récupère ce qu'il reste. C'est même une combinaison courante pour une barre latérale fixe à côté d'un contenu flexible.

Les enfants en trop ne disparaissent pas. Ils se placent dans de nouvelles lignes implicites, en réutilisant le même schéma de colonnes que celui déclaré. Si vous avez trois colonnes et sept enfants, vous obtenez deux lignes complètes et une troisième ligne avec un seul élément.

Oui, les deux propriétés sont indépendantes. Sans grid-template-rows, la hauteur des lignes s'ajuste automatiquement au contenu le plus haut de chaque ligne, ce qui convient très bien à la majorité des mises en page où seule la largeur des colonnes doit être précise.