Générateur de CSS Grid
Ajustez grid-template-columns/rows, justify-items, align-items et gap via une interface graphique interactive et prévisualisez de vraies mises en page CSS Grid en temps réel. Copiez le CSS généré en un clic.
Astuces d'utilisation
- L'unité fr dans grid-template-columns: repeat(3, 1fr) représente une part de l'espace restant, si bien que le rapport entre les colonnes reste constant même si la largeur de la fenêtre change.
- La propriété gap n'affecte que l'espacement entre les lignes et les colonnes, contrairement à margin qui affecte aussi l'extérieur de la grille. Vous pouvez aussi définir row-gap et column-gap séparément.
- Les pistes définies sur "auto" s'adaptent à la taille réelle de leur contenu, ce qui est pratique pour des colonnes ou des lignes dont la longueur du contenu est imprévisible.
- En surchargeant grid-column: span 2 sur un seul élément, vous pouvez faire en sorte que seul l'en-tête ou le pied de page s'étende sur toute la largeur de la grille.
- Utilisez Grid lorsque vous avez besoin d'une mise en page bidimensionnelle complète, et Flexbox lorsqu'une seule ligne ou colonne d'éléments suffit (voir aussi notre générateur de CSS Flexbox).
Questions fréquentes
Anecdote — la "seconde dimension" que CSS Grid vise et que Flexbox ne couvre pas
CSS Grid Layout a été conçu comme un système de mise en page bidimensionnel permettant de définir simultanément des lignes et des colonnes, contrairement à Flexbox, qui se concentre sur l'agencement d'éléments dans une seule direction. Sa normalisation au sein du W3C a débuté vers 2011, et lorsque Chrome, Firefox, Safari et Edge ont implémenté sa prise en charge quasi simultanément en 2017, son adoption dans des projets réels s'est rapidement accélérée.
Avant l'existence de Grid, organiser une page selon la structure classique "holy grail" — en-tête, barre latérale, contenu principal et pied de page — nécessitait des contournements complexes reposant sur float ou des balises de tableau. CSS Grid a introduit des propriétés déclaratives telles que grid-template-columns, grid-template-rows et grid-template-areas, permettant de recréer cette mise en page familière en seulement quelques lignes de CSS.
Aujourd'hui, une grande partie du travail de conception derrière les interfaces de tableau de bord, les galeries d'images et les mises en page façon magazine, organisées autour de lignes et de colonnes, est réalisée avec CSS Grid. La prise en charge de "subgrid", qui permet à une grille imbriquée d'hériter du dimensionnement des pistes de sa grille parente, s'est également répandue dans les principaux navigateurs, facilitant le maintien de la cohérence dans des mises en page complexes à plusieurs niveaux.
En pratique, une convention s'est imposée : Grid gère l'ossature générale de la page, tandis que Flexbox gère l'agencement des éléments à l'intérieur de chaque composant. Les deux ne sont pas des technologies concurrentes, mais des outils complémentaires, chacun adapté à une force différente (alignement unidimensionnel contre placement bidimensionnel en grille), et les combiner au sein d'une même page est considéré comme une pratique standard.