Comprendre le CSS Grid en partant de zéro
Grid Layout bouleverse la façon dont on pense la mise en page : voici comment en maîtriser les bases sans se noyer dans la documentation.
Pendant des années, les développeurs ont utilisé des flottants, puis Flexbox, pour construire des mises en page. CSS Grid arrive avec une promesse différente : gérer simultanément les deux axes, horizontal et vertical, depuis un seul conteneur. C'est ce changement de paradigme qui déroute au début.
Avant Grid, on empilait des éléments en ligne puis on les faisait flotter ou on les plaçait en flex-row. Avec Grid, on déclare d'abord la structure, combien de colonnes, combien de lignes, quelle taille pour chacune, puis on place les éléments dedans. La logique s'inverse : le conteneur commande, les enfants obéissent.
Les propriétés indispensables
Trois déclarations suffisent pour votre premier vrai Grid. Sur le conteneur : `display: grid` active le mode. `grid-template-columns: repeat(3, 1fr)` crée trois colonnes de largeur égale. `gap: 1rem` ajoute un espace uniforme entre toutes les cellules. Vous venez de construire une grille à trois colonnes responsive sans media query.
La valeur `1fr` est la clé. Elle signifie « une fraction de l'espace disponible ». Écrire `grid-template-columns: 1fr 2fr 1fr` crée trois colonnes dont la centrale est deux fois plus large que les deux autres. L'espace restant est distribué proportionnellement, après que les marges et gaps ont été soustraits.
Placer les éléments avec précision
Sur les éléments enfants, `grid-column: 1 / 3` indique que l'élément commence à la ligne de grille 1 et finit à la ligne 3, occupant ainsi deux colonnes. La notation `span` simplifie l'écriture : `grid-column: span 2` signifie « occupe deux colonnes depuis ta position actuelle ».
Pour les cas complexes, la propriété `grid-template-areas` vous permet de dessiner votre mise en page en ASCII art dans votre CSS. Définissez des zones nommées sur le conteneur, puis assignez chaque enfant à une zone avec `grid-area: header`. Votre CSS devient lisible comme un schéma, ce qui facilite la relecture et la maintenance.
La meilleure façon d'apprendre Grid reste la pratique : ouvrez les DevTools de Firefox (ils offrent un inspecteur Grid particulièrement clair), activez la surimpression de grille et expérimentez en direct.