Construire CSS Grid avec Subgrid et Container Queries

Que fait le générateur CSS Grid ?

Le générateur construit des layouts CSS Grid visuellement. Colonnes et lignes sont définies via des track controls — un unit-picker par track (fr, px, %, auto, min-content, max-content, minmax) et un éditeur de valeur. Vous créez les template areas en cliquant sur des cellules dans une matrice et en tapant les noms de région. Des inspecteurs par item permettent grid-area, des zones colonne/ligne numériques, des toggles Subgrid et des overrides d’order.

Au-dessus de la configuration, un aperçu côte à côte affiche le layout dans trois viewports simultanément — mobile (375 px), tablette (768 px) et desktop (1280 px). Les édits se propagent en direct dans les trois. C’est la différence décisive avec les générateurs à breakpoint switcher : vous voyez immédiatement comment un changement de layout agit sur les trois appareils, au lieu de cliquer chacun séparément.

Note sur l’aperçu : les trois viewports sont rendus via des règles CSS scoped (pas d’<iframe>) pour que la configuration reste pur-client et compatible SSR. C’est illustratif, pas pixel-perfect : les unités vw, cqi et cqw se résolvent contre la vraie largeur de page de l’outil, pas contre les 375/768/1280 px de la stage. Pour les primitives fr, px, %, auto et minmax(), le rendu est exact ; pour les breakpoints @container, vous voyez la logique de bascule correctement, mais la résolution Container Query dans la box mise en scène est une approximation.

La sortie vient en quatre formats : CSS pur avec display: grid plus propriétés grid-template-*, Tailwind v4 avec classes arbitrary-value pour tracks et grid-template-areas, SCSS avec variables $grid-* réutilisables, et markup HTML correspondant pour chaque format. Tous les onglets sont paste-ready.

Comment fonctionne Subgrid ?

subgrid résout un problème que CSS Grid n’avait pas longtemps eu : les cartes dans une rangée doivent aligner leurs en-têtes et pieds sur des lignes communes, même si les longueurs de contenu varient. Sans Subgrid, seules la synchronisation de hauteur en JavaScript ou l’abandon du concept de carte aident. Avec Subgrid, chaque carte pose grid-template-rows: subgrid et reprend la définition de lignes de son grid parent — en-tête et pied atterrissent automatiquement à la même hauteur.

Prise en charge navigateur depuis fin 2023 partout : Chrome 117, Safari 16 et Firefox 71 prennent en charge Subgrid sur les deux axes. La plupart des générateurs en ligne ignorent encore complètement la fonctionnalité. Ce générateur émet subgrid comme toggle first-class par item plus une pastille de statut dès que Subgrid est actif quelque part, pour que vous puissiez documenter immédiatement les exigences navigateur.

Quand prend-on les Container Queries ?

Les Container Queries (règle @container + container-type: inline-size) sont la deuxième grande innovation CSS layout de la décennie. Elles réagissent à la taille d’un conteneur parent donné au lieu de la largeur de viewport. Cas d’usage : un composant Card qui rend en stack compact dans la sidebar et en bloc horizontal trois colonnes dans la zone principale — sans avoir à polluer le composant Card avec des classes spécifiques à la sidebar.

Le générateur émet en opt-in un wrapper .grid-container { container-type: inline-size; } plus jusqu’à trois blocs @container (min-width: Npx) avec des définitions de tracks propres par breakpoint. Le markup HTML est automatiquement ajusté en conséquence. Les Container Queries sont prises en charge depuis 2023 dans tous les grands navigateurs.

Comment écrire CSS Grid en Tailwind v4 ?

Tailwind a, en v4, basculé la configuration en CSS-First et normalisé largement les arbitrary values. Au lieu de l’échelle rigide grid-cols-12, le générateur émet l’expression de track précise :

Concept	Tailwind v4	CSS pur
Tracks fr égaux	grid-cols-2	grid-template-columns: 1fr 1fr
Unités mixtes	grid-cols-[200px_1fr_auto]	grid-template-columns: 200px 1fr auto
Cartes responsives	grid-cols-[repeat(auto-fill,minmax(280px,1fr))]	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
Template areas	[grid-template-areas:'header_header''sidebar_main']	grid-template-areas: "header header" "sidebar main"
Subgrid	grid-cols-subgrid	grid-template-columns: subgrid
Item span	col-span-3	grid-column: span 3
Named area	[grid-area:header]	grid-area: header

Les underscores entre cellules dans les arbitrary values sont un quirk v4 — Tailwind ne peut pas parser d’espaces dans les noms de classe, donc v4 utilise _ comme séparateur et convertit en espaces au build. Le générateur le pose automatiquement correctement.

Quels presets de layout sont inclus ?

Cinq layouts réels curés :

Holy-Grail layout. Header en haut, sidebar/main/aside au milieu, footer en bas. Classique avec grid-template-areas. Définition d’item via noms plutôt que numéros de ligne — très lisible dans le stylesheet.

Grille de cartes. Cartes responsives via repeat(auto-fill, minmax(280px, 1fr)). Se réorganise automatiquement dès que la place manque, sans Media Queries. Les contenus de cartes devraient poser min-width: 0, sinon un mot long peut faire sauter le plancher minmax.

Layout magazine. Grid 12 colonnes avec spans d’item pour hero, lead, sidebar, feature et aside. Assez flexible pour la diversité éditoriale, assez structuré pour une réutilisation cohérente.

Dashboard. Header en haut, sidebar à gauche, content à droite, status en bas. Squelette admin-shell solide sans position: absolute.

Cartes Subgrid. Cartes avec lignes en-tête et pied alignées via subgrid. Démontre l’argument le plus fort pour Grid Level 2 — lignes verticales propres sans helper JavaScript.

Que signifie l’indication d’ordre ?

Le critère de succès WCAG 2.2 1.3.2 « Meaningful Sequence » exige que l’ordre de lecture et de tab corresponde au flux de lecture visuel. Si vous arrangez des items via order ou grid-area de sorte qu’un item déclaré plus tard dans le DOM apparaît visuellement avant un item déclaré plus tôt, voici ce qui se passe :

• Les utilisateurs souris voyants lisent l’ordre visuel — le layout paraît correct.
• Les utilisateurs clavier sautent avec Tab dans l’ordre DOM — ils atterrissent dans une autre séquence.
• Les lecteurs d’écran lisent également l’ordre DOM — et énoncent ainsi le layout différemment.

Le générateur signale ces drifts inline. Solutions : soit ajuster l’ordre DOM (déclarer les items dans l’ordre visuel voulu dans le HTML) soit reconstruire le layout pour qu’aucun décalage order/grid-area ne soit nécessaire.

Quels sont les pièges les plus fréquents de CSS Grid ?

min-content contre 0. Les items ont par défaut min-width: auto, c’est le contenu minimum intrinsèque. Pour les mots longs ou les images larges, un seul item fait sauter le layout. Fix : min-width: 0 sur l’item — il respecte alors correctement le minmax().

grid-template-areas avec trous. Chaque ligne a besoin du même nombre de cellules. Rectangles au lieu de formes en L — une région ne peut pas s’étendre sur deux zones non-contiguës. Les cellules point (.) marquent explicitement les emplacements vides.

fr avec largeur minimum absolue. 1fr ne distribue que l’espace restant après déduction de tous les tracks fixes. Si le contenu d’une colonne fr devient plus grand que l’espace restant, la colonne s’étend quand même — le conteneur peut s’élargir. Fix : minmax(0, 1fr) au lieu de 1fr.

Subgrid a besoin d’un grid parent. grid-template-columns: subgrid sans grid parent explicitement défini n’a aucun effet — et le navigateur ne signale pas d’erreur. C’est seulement quand un ancêtre pose display: grid plus tracks explicites que l’item subgrid reprend ceux-ci.

Comment ce générateur se distingue-t-il ?

Les générateurs en ligne comparables ne livrent généralement que du CSS pur, un seul aperçu de breakpoint à la fois et aucune indication sur l’ordre de tab ou Subgrid. Ce générateur pose cinq accents :

• Subgrid first-class — la plupart des générateurs ignorent complètement la fonctionnalité. Ici c’est un toggle par item.
• Container Queries opt-in — aucun des concurrents testés n’émet de blocs @container. Chez nous, le grid réagit au choix au viewport OU à la largeur du conteneur.
• Trois viewports en parallèle — d’autres outils montrent un breakpoint à la fois ; ici vous voyez mobile, tablette et desktop simultanément.
• Arbitrary values Tailwind v4 — d’autres outils écrivent encore grid-cols-12. Nous émettons grid-cols-[200px_1fr_auto] avec syntaxe Tailwind v4.
• Indication d’ordre WCAG — aucun autre outil ne prévient des drifts d’ordre de tab, alors que WCAG 2.2 l’exige.

Questions fréquentes

Que fait un générateur CSS Grid ?

Le générateur construit des layouts CSS Grid visuellement. Vous définissez colonnes et lignes via des UI controls, peignez des template areas dans une matrice de cellules, assignez des items via grid-area et voyez le résultat en direct dans trois viewports en parallèle — mobile, tablette et desktop. La sortie vient en CSS pur, Tailwind v4, SCSS ou HTML.

Comment fonctionne CSS Subgrid ?

Subgrid se définit via grid-template-columns: subgrid ou grid-template-rows: subgrid sur un grid item. L’item reprend alors les tracks de son grid parent au lieu d’en définir des propres. Cas d’usage classique : les en-têtes et pieds de cartes s’alignent sur une ligne commune, sans synchronisation de hauteur en JavaScript. Pris en charge depuis Chrome 117, Safari 16 et Firefox 71.

Quelle est la différence entre Container Queries et Media Queries ?

Les Media Queries réagissent aux tailles de viewport, les Container Queries à la taille d’un conteneur parent donné. Un bloc @container (min-width: 480px) se déclenche quand le conteneur, pas la fenêtre du navigateur, mesure au moins 480 px de large. Cela rend les composants réellement réutilisables — un composant Card s’adapte qu’il soit dans la sidebar ou la zone principale. Nécessite container-type: inline-size sur l’élément parent.

Quand prend-on CSS Grid plutôt que Flexbox ?

Grid est bidimensionnel et planifie lignes ET colonnes simultanément — idéal pour layouts de page, structures magazine, grilles de cartes et shells de dashboard. Flexbox est unidimensionnel et pousse les items le long d’un axe — parfait pour barres de navigation, toolbars ou listes verticales. En pratique, on combine les deux : Grid pour le squelette extérieur, Flexbox pour les composants intérieurs.

Que sont les grid-template-areas ?

grid-template-areas est une notation visuelle pour les layouts CSS Grid : vous décrivez l’arrangement via des noms de région dans des chaînes de caractères, par ex. "header header" "sidebar main" "footer footer". Les items avec grid-area: header atterrissent automatiquement là. Avantage : le layout est immédiatement lisible dans le stylesheet, pas besoin de compter les lignes de colonne.

Comment écrire CSS Grid en classes Tailwind v4 ?

Tailwind v4 permet des arbitrary values pour toutes les propriétés Grid. grid-cols-[200px_1fr_auto] remplace l’échelle rigide grid-cols-12. Les template areas passent par [grid-template-areas:'header_header''sidebar_main''footer_footer'] — underscores entre cellules, guillemets simples par ligne. Subgrid reçoit grid-cols-subgrid et grid-rows-subgrid comme utility classes natives.

Que montre l’indication d’ordre ?

Le critère de succès WCAG 2.2 1.3.2 exige que l’ordre de lecture/tab corresponde à l’ordre visuel. Si vous placez des items avec order ou grid-area de sorte qu’ils apparaissent visuellement avant un frère déclaré plus tôt dans le DOM, le focus tab pour les utilisateurs clavier et lecteur d’écran saute quand même dans l’ordre DOM — le layout paraît à l’envers. Le générateur marque ces drifts inline.

L’outil enregistre-t-il mes layouts ?

Non. Tous les réglages résident exclusivement dans l’onglet du navigateur — sans serveur, sans compte, sans cookies. Au rechargement, l’éditeur démarre avec les tracks par défaut. Pour conserver un layout, copiez la sortie code dans votre propre stylesheet.

Quels outils CSS sont liés ?

D’autres outils pour le CSS-authoring visuel :

• Playground Flexbox — layouts Flex unidimensionnels avec overlay d’axes et overrides par item.
• Constructeur d’animation CSS — animations keyframes avec fallback Reduced Motion et export Tailwind v4.
• Générateur Box-Shadow — ombres multicouches avec presets Material 3 Elevation.
• Générateur de gradient CSS — dégradés linéaires, radiaux et coniques avec OKLCH.