Générateur CSS Grid, gratuit

Comment utiliser

1. Définissez les dimensions de la grille : saisissez le nombre de colonnes et de rangées pour votre mise en page.
2. Définissez les pistes : réglez la largeur de chaque colonne et la hauteur de chaque rangée avec des unités fr, des pixels, des pourcentages, auto ou minmax().
3. Copiez le CSS : les propriétés display: grid, grid-template-columns, grid-template-rows et gap générées sont prêtes à coller dans votre feuille de style.

Pourquoi utiliser le générateur CSS Grid ?

CSS Grid est le système de mise en page le plus puissant de CSS, capable de créer des mises en page bidimensionnelles complexes qui exigeaient auparavant des tables, des floats ou du JavaScript. Mais maîtriser grid-template-columns, les unités fr, minmax(), repeat() et les zones nommées demande de la pratique. Ce générateur visuel vous permet de construire n'importe quelle grille par clic et glisser, puis produit un CSS propre à utiliser immédiatement ou à étudier pour approfondir votre compréhension de Grid.

Fonctionnalités

• Constructeur visuel de grille : cliquez pour définir visuellement les pistes de colonnes et de rangées.
• Prise en charge des unités fr : utilisez des unités fr flexibles pour des colonnes proportionnelles responsives.
• Raccourci minmax() : créez facilement des colonnes responsives avec contraintes de taille minimale et maximale.
• Contrôle de l'espace : réglez column-gap et row-gap indépendamment.
• Zones nommées : définissez grid-template-areas avec une interface visuelle de peinture de zones.

Questions fréquentes

Qu'est-ce qu'une unité « fr » en CSS Grid ?

L'unité fr (fraction) répartit l'espace disponible proportionnellement. Dans une grille à 3 colonnes avec 1fr 2fr 1fr, la colonne du milieu reçoit deux fois plus d'espace que les extérieures. Les unités fr se partagent l'espace restant après l'allocation des pistes à taille fixe.

Comment créer une grille responsive sans media queries ?

Utilisez repeat(auto-fill, minmax(200px, 1fr)) comme valeur de grid-template-columns. Cela crée autant de colonnes que la taille minimale le permet, s'étendant pour remplir l'espace disponible. Les éléments se réorganisent automatiquement quand la largeur du conteneur change.

Quelle est la différence entre grid-template et grid-auto ?

grid-template-columns/rows définit les pistes explicites que vous spécifiez. grid-auto-columns/rows définit la taille des pistes implicites, colonnes et rangées créées automatiquement quand les éléments débordent de la grille explicite.

Une brève histoire de CSS Grid

Avant CSS Grid, les mises en page web ont traversé trois époques pénibles. Les mises en page à base de tables (1995-2008) détournaient l'élément <table> à des fins de structure visuelle, avec un «découpage» de maquettes Photoshop en grilles HTML. Les mises en page à base de flottants (2008-2013) ont remplacé les tables par la propriété float, nécessitant des bidouilles «clearfix» comme le micro-clearfix de Nicolas Gallagher (2011) pour contenir les enfants en retour à la ligne. Flexbox (CSS Flexible Box Layout Module Level 1, Recommandation W3C 2018) a résolu les mises en page unidimensionnelles mais peinait avec les véritables grilles bidimensionnelles. L'histoire de CSS Grid commence avec l'implémentation -ms-grid de Microsoft dans Internet Explorer 10 (2012), une première version qui a éclairé la spécification W3C. Le premier projet de travail public W3C de CSS Grid Layout Module Level 1 est paru en avril 2011, mais l'élan véritable est venu du travail de plaidoyer de Rachel Andrew (son livre Get Ready for CSS Grid Layout, 2016) et de Jen Simmons (développeuse-évangéliste Mozilla, circuit de conférences 2016-2018). La course des navigateurs s'est dénouée dans une remarquable fenêtre de deux mois en mars 2017 : Chrome 57, Firefox 52, Safari 10.1 et Edge 16 ont tous livré Grid sans préfixe à quelques semaines d'écart. Le W3C a marqué Grid Level 1 comme Recommandation candidate en décembre 2016 ; la Recommandation W3C finale est arrivée en août 2020. Subgrid (Level 2) est arrivé dans Firefox 71 (déc. 2019), Safari 16 (sept. 2022) et Chrome 117 (sept. 2023). La prochaine frontière est la mise en page Masonry proposée (proposition CSS Working Group 2020, derrière un flag dans Firefox depuis 2021).

L'anatomie d'une grille CSS

• Le conteneur de grille. display: grid (ou display: inline-grid) transforme n'importe quel élément en contexte de grille. Les enfants directs de cet élément deviennent des «éléments de grille» et participent à la mise en page de la grille. Les petits-enfants ne sont pas affectés à moins qu'ils ne définissent eux-mêmes display: grid.
• grid-template-columns et grid-template-rows. Définissent les pistes explicites (colonnes et lignes). Les valeurs peuvent être fixes (px, em, rem), flexibles (fr, l'unité «fraction» définie dans la spécification CSS Grid), dimensionnées au contenu (auto, min-content, max-content), ou toute combinaison. grid-template-columns: 200px 1fr 1fr crée une barre latérale de 200px plus deux colonnes flexibles égales.
• L'unité fr. L'unité de fraction distribue l'espace restant après allocation des pistes à taille fixe. 1fr 2fr 1fr donne à la colonne centrale deux fois plus d'espace résiduel que les colonnes latérales. fr est unique à Grid (et l'équivalent apparenté flex-basis: 0 1 fr dans Flexbox n'est pas la même chose). Elle résout ce avec quoi le motif «colonne en pourcentage» a lutté pendant des décennies : la distribution propre de l'espace restant.
• repeat() et minmax(). repeat(3, 1fr) définit de manière compacte trois colonnes égales. minmax(200px, 1fr) contraint une piste à une plage. La combinaison phare grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) produit une grille réactive qui ajuste automatiquement le nombre de colonnes au conteneur, sans requêtes média. Cette seule ligne a remplacé des milliers de définitions de points de rupture dans du CSS de production.
• grid-template-areas. Une syntaxe en chaînes visuellement disposées qui nomme les régions de la grille. Les enfants s'inscrivent dans une zone nommée avec grid-area: header. Le résultat est une mise en page-comme-art-ASCII : toute personne lisant le CSS peut visualiser la grille à partir du code source. Particulièrement puissante pour la mise en page «holy grail» (en-tête / barre latérale / principal / aside / pied) qui a défait les concepteurs CSS pendant une décennie.
• gap (et column-gap, row-gap). Définit l'espacement entre les pistes. gap: 16px espace uniformément toutes les lignes et colonnes. Avant Grid, cela nécessitait des motifs padding+margin fragiles ou des marges négatives soigneusement calculées. La même propriété gap a été ajoutée plus tard à Flexbox (universellement prise en charge depuis 2022) et est désormais considérée comme la manière canonique de gérer l'espacement entre éléments dans CSS moderne.

Motifs Grid du monde réel

• Galeries d'images. Le motif repeat(auto-fill, minmax(200px, 1fr)) est le CSS dominant pour les sites de portfolio (grilles Behance), les galeries photo (style Unsplash) et les collections de produits. L'auto-adaptation du nombre de colonnes sans requêtes média était pratiquement impossible avant Grid.
• Tableaux de bord et panneaux d'administration. Grafana, Datadog, Stripe Dashboard et la plupart des interfaces d'administration modernes utilisent des zones de grille nommées pour positionner cartes, barres latérales et régions de contenu. Les constructeurs de tableaux de bord par glisser-déposer (DataDog, Looker, Tableau) traduisent les actions utilisateur en mutations de chaînes grid-template-areas.
• Mises en page de type magazine. Les sites éditoriaux (The Guardian, NYT, Vox) utilisent Grid pour des mises en page asymétriques avec éléments qui se chevauchent, grandes images héros qui s'étendent sur plusieurs colonnes, et citations pull-quote qui débordent de la colonne de texte principale. L'axe z de Grid (z-index avec zones explicites) gère naturellement le superposement.
• Grilles de cartes produits. Vitrines Shopify, Amazon, Etsy. Le motif est si commun que Tailwind CSS, Bootstrap et Bulma livrent tous des composants de cartes basés sur Grid dans leur jeu utilitaire de base. Le ratio d'aspect des cartes est désormais typiquement verrouillé avec la propriété aspect-ratio (Safari 15, Chrome 88, 2021).
• La mise en page «holy grail». En-tête / barre latérale gauche / contenu principal / barre latérale droite / pied. Cette mise en page à 5 régions a été le problème non résolu de CSS pendant 15 ans. Avec grid-template-areas et 8 lignes de CSS, elle est devenue triviale en 2017. Le motif domine les sites de documentation (Stripe Docs, MDN, Vercel Docs).
• Mises en page de formulaires. Formulaires à deux colonnes avec étiquettes à gauche et entrées à droite, formulaires d'adresse avec ville/état/code postal sur une ligne, assistants multi-étapes. Grid permet aux étiquettes et entrées de s'aligner proprement à travers les lignes même lorsque les largeurs de contenu varient. Le motif a remplacé les approches antérieures basées sur des bidouilles de largeur d'étiquette par du CSS plus propre.
• Positionnement de modales et de dialogues. display: grid; place-items: center; sur un calque de pleine fenêtre centre parfaitement un dialogue horizontalement et verticalement avec une seule ligne, remplaçant des décennies de motifs position: absolute; top: 50%; transform: translateY(-50%);. place-items est la façon canonique 2024 de centrer du contenu arbitraire.
• Réactif sans requêtes média. Combiner repeat(auto-fill, minmax(...)) avec gap produit des mises en page qui s'adaptent à la largeur du conteneur sans aucune requête média. C'est le socle du design réactif moderne : des mises en page qui répondent à la taille du conteneur plutôt qu'à la taille de la fenêtre, anticipant les Container Queries (désormais également livrées, 2023).

Standards et jalons

• IE10 -ms-grid (2012). Microsoft a livré la première implémentation de type Grid, conçue par Phil Cupp chez Microsoft. La syntaxe différait de la spécification W3C finale mais a prouvé le concept et influencé les décisions de conception ultérieures.
• CSS Grid Layout Module Level 1, projet de travail W3C (avril 2011). Le premier projet public W3C. De multiples itérations ont suivi ; la syntaxe a évolué significativement entre 2011 et l'implémentation finale de 2017.
• Plaidoyer de Rachel Andrew et Jen Simmons (2014-2017). Le livre d'Andrew Get Ready for CSS Grid Layout (Smashing Magazine, 2016) et les conférences de Simmons en tant que développeuse-évangéliste Mozilla ont construit la base de connaissances communautaires qui a rendu l'expédition par les navigateurs viable. Les deux sont créditées dans les notes des éditeurs W3C de la spécification.
• Course des navigateurs, mars 2017. Dans une remarquable fenêtre de deux mois, Chrome 57 (9 mars), Firefox 52 (7 mars), Safari 10.1 (27 mars) et Edge 16 (octobre 2017) ont tous livré Grid sans préfixe. Ce niveau d'expédition multi-navigateurs synchronisée était presque sans précédent pour une fonctionnalité de cette complexité.
• Recommandation candidate (décembre 2016). CSS Grid Level 1 a été promu à la Recommandation candidate W3C, la dernière étape avant la Recommandation W3C. La phase CR prend typiquement des années ; Grid s'est déplacée plus rapidement que la plupart des fonctionnalités CSS à ce stade.
• Recommandation W3C (août 2020). Grid Level 1 a été finalisée en tant que Recommandation W3C. C'est techniquement la date de «lancement» de la spécification, mais tous les navigateurs majeurs avaient livré une implémentation fonctionnelle trois ans plus tôt.
• Subgrid (Level 2, 2019-2023). Subgrid permet à un élément de grille d'hériter des définitions de piste de son parent, résolvant le problème de «l'alignement de grilles imbriquées». Firefox 71 (déc. 2019), Safari 16 (sept. 2022), Chrome 117 (sept. 2023). Le déploiement lent de Chrome reflétait la complexité d'implémentation.
• Mise en page Masonry (proposée, 2020-). Le CSS Working Group débat de la syntaxe depuis 2020. Firefox l'a livrée derrière un flag en 2021. Les mises en page fluides à la Pinterest qui empilent les éléments dans des colonnes sont le cas d'usage cible. L'équipe Chrome (menée par Apple) et l'équipe Mozilla ont proposé des syntaxes concurrentes ; résolution en attente depuis 2024.

Questions fréquentes supplémentaires

Quand utiliser Grid plutôt que Flexbox ?

Le raccourci communautaire : Flexbox pour une dimension, Grid pour deux. Si vous disposez une rangée de boutons ou alignez des éléments dans une seule direction, Flexbox est plus simple. Si vous concevez une mise en page de page entière avec des lignes et colonnes qui doivent s'aligner, Grid est le bon outil. Beaucoup de mises en page réelles combinent les deux : Grid pour le squelette de la page, Flexbox pour l'alignement au niveau des composants à l'intérieur de chaque zone de grille. Les frameworks modernes (Tailwind, Bootstrap 5) adoptent ce motif.

CSS Grid fonctionne-t-il dans les navigateurs plus anciens ?

Tous les navigateurs evergreen (Chrome, Firefox, Safari, Edge) prennent en charge Grid depuis mars 2017. Internet Explorer 11 n'a que la syntaxe ancienne -ms-grid (sous-ensemble, préfixé, manquant de nombreuses fonctionnalités). Pour la prise en charge d'IE11, utilisez des requêtes @supports pour revenir à Flexbox ou à des mises en page à base de flottants. En 2024, IE11 a moins de 0,5 % d'utilisation globale, donc la plupart des équipes ont abandonné le repli. Caniuse.com rapporte plus de 97 % de prise en charge globale pour Grid sans préfixe.

Quelle est la différence entre grid-template-areas et grid-area ?

grid-template-areas est défini sur le conteneur de grille et cartographie visuellement les régions nommées de la grille (une chaîne par ligne). grid-area est défini sur un élément de grille pour lui assigner l'une de ces régions nommées. Les deux fonctionnent ensemble : le conteneur déclare la «carte», les éléments déclarent «je suis la région X». Vous pouvez aussi utiliser grid-area directement avec des numéros de lignes (grid-area: 1 / 1 / 3 / 4) au lieu de noms, ce qui est utile pour les mises en page dynamiques.

Qu'est-ce que subgrid et quand devrais-je l'utiliser ?

Subgrid permet à une grille imbriquée d'hériter des définitions de piste de sa grille parente au lieu de créer les siennes. Cela résout le problème de l'alignement d'éléments à travers des grilles imbriquées, par exemple, une carte avec une mise en page interne qui doit s'aligner avec les cartes environnantes. Utilisez grid-template-columns: subgrid sur la grille imbriquée. Disponible dans Firefox 71+ (déc. 2019), Safari 16+ (sept. 2022), Chrome 117+ (sept. 2023). Retombe sur une grille imbriquée normale dans les navigateurs qui ne la prennent pas en charge.

Comment Grid interagit-il avec l'accessibilité ?

Le positionnement Grid ne change pas l'ordre source du DOM : les éléments apparaissent à la position visuelle que vous assignez, mais les lecteurs d'écran et l'ordre de tabulation au clavier suivent la source. WCAG 2.1 SC 1.3.2 Séquence significative exige que l'ordre source ait du sens lorsque les styles sont supprimés. L'implication : concevez d'abord votre source DOM pour un ordre de lecture logique, puis utilisez Grid pour placer les éléments visuellement. Si vous réordonnez radicalement les éléments avec grid-column: 3 / 5; grid-row: 2, auditez avec un lecteur d'écran pour confirmer que l'ordre vocal a toujours du sens.