CSS Grid : techniques avancées pour les layouts complexes

CSS Grid a profondément changé la façon dont on construit des mises en page sur le web. Mais dans la majorité des projets, on n'en utilise qu'une fraction des capacités — la grille à 12 colonnes, le repeat(3, 1fr), et on appelle ça un jour. Les fonctionnalités avancées restent largement sous-exploitées.

Ce guide couvre les techniques que j'utilise pour construire des layouts complexes, adaptatifs et maintenables — sans une ligne de JavaScript pour gérer le positionnement.

Subgrid : la révolution silencieuse

Subgrid est la fonctionnalité CSS Grid la plus transformatrice de ces dernières années. Elle permet à un élément enfant d'une grille de participer à la grille parente plutôt que de créer sa propre grille indépendante.

Le cas d'usage classique : vous avez une grille de cartes. Chaque carte a un titre, une description et un bouton. Sans subgrid, aligner les titres, les descriptions et les boutons entre les cartes requiert JavaScript ou des hauteurs fixes hackées. Avec subgrid, c'est CSS pur :

• L'élément parent définit display: grid et grid-template-rows
• L'enfant hérite avec grid-row: span 3 et grid-template-rows: subgrid
• Toutes les lignes des cartes s'alignent automatiquement, quelle que soit la longueur du contenu

Subgrid était la fonctionnalité la plus attendue de CSS Grid — et elle valait l'attente.

Named Grid Lines et Grid Areas

Les lignes nommées transforment une grille technique en grille sémantique. Au lieu de compter les colonnes (la carte part de la colonne 3 à la colonne 7), vous nommez les lignes et vous positionnez les éléments par nom. L'intention devient lisible directement dans le CSS.

Les Grid Areas vont encore plus loin en permettant de dessiner la mise en page comme une carte ASCII dans grid-template-areas. Le layout entier est lisible d'un coup d'œil — sidebar, main, header, footer — chaque élément assigné à sa zone par son nom.

Auto-placement et dense packing

Par défaut, CSS Grid place les éléments dans l'ordre du flux — une case après l'autre. L'algorithme dense change ce comportement en remplissant les cases vides avec des éléments plus petits, indépendamment de leur ordre dans le DOM :

• grid-auto-flow: dense — active le remplissage automatique
• Combiné à grid-column: span 2 ou grid-row: span 2 sur certains éléments, vous obtenez des grilles masonry-like sans JavaScript

C'est idéal pour des galeries de photos de formats variés, des feeds de contenu ou des layouts éditoriaux asymétriques.

Responsive sans breakpoints avec auto-fill

La combinaison repeat(auto-fill, minmax(280px, 1fr)) est peut-être la ligne CSS la plus élégante qui existe. Elle crée autant de colonnes que possible avec une largeur minimale de 280px, chacune s'étirant jusqu'à remplir l'espace disponible.

Résultat : 1 colonne sur mobile, 2 sur tablette, 3 ou 4 sur desktop — sans une seule media query. L'adaptation est mathématiquement parfaite à chaque largeur de viewport.

Pour les cas où vous voulez éviter qu'un seul élément occupe toute la largeur quand la grille se réduit à une colonne, utilisez auto-fit plutôt que auto-fill : les colonnes vides sont collapsées au lieu d'être maintenues.

Combiner Grid et Flexbox

Grid et Flexbox ne sont pas en compétition — ils sont complémentaires. Grid excelle pour les mises en page bidimensionnelles (lignes ET colonnes), Flexbox pour les distributions unidimensionnelles (alignement dans une seule direction).

La pratique courante :

• Grid pour l'architecture générale de la page (header, sidebar, main, footer)
• Flexbox pour les composants internes (navigation, boutons groupés, liste d'icônes)

Forcer Grid là où Flexbox suffit complexifie inutilement le code. Savoir quand basculer de l'un à l'autre est la marque d'un développeur front-end mature.