Grid
G
Definition complete
CSS Grid est un systeme de mise en page CSS bidimensionnel permettant de definir des colonnes et des rangees pour positionner les elements dans une grille. Contrairement a Flexbox (unidimensionnel), Grid gere simultanement les deux axes.
La syntaxe Grid definit : le conteneur (display: grid), les colonnes (grid-template-columns), les rangees (grid-template-rows), les gaps (espacement), et le placement des items (grid-column, grid-row). Les unites fr (fraction) permettent une distribution flexible de l'espace.
Grid excelle pour les layouts de page complexes : headers, sidebars, main content, et footers positionnes precisement. La fonctionnalite grid-template-areas permet de nommer les zones et de les reorganiser facilement pour le responsive.
Grid et Flexbox sont complementaires : Grid pour la structure macro de la page, Flexbox pour l'alignement micro des composants. Utiliser les deux ensemble offre une flexibilite maximale pour les layouts modernes.
Exemples pratiques
- Layout 12 colonnes : grid-template-columns: repeat(12, 1fr) cree une grille classique de 12 colonnes.
- Layout nomme : grid-template-areas: "header header" "sidebar main" "footer footer" definit une structure semantique.
- Responsive : grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) cree une grille qui s'adapte automatiquement.
A quoi sert Grid ?
CSS Grid est ideal pour les layouts de page complets, les galeries d'images, les tableaux de bord, et toute mise en page necessitant un controle precis sur les deux dimensions. C'est un pilier du CSS moderne.
Grid en pratique chez 123web
Chez 123web, nous utilisons CSS Grid pour structurer les layouts de nos sites. Combine a Flexbox pour les composants, Grid nous permet de creer des designs responsives maintenables sans les hacks de positionnement d'autrefois.