Mise en page CSS Grid du Saint Graal — Code prêt à l’emploi
Concevez visuellement des mises en page CSS Grid : définissez les colonnes, les lignes et l’espacement, puis tapez des noms de zone dans les cellules pour construire grid-template-areas — avec un aperçu en direct et du code CSS et HTML prêt à copier.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de grille préchargé avec la mise en page du Saint Graal : trois colonnes et trois lignes, avec un en-tête et un pied de page s’étendant sur toute la largeur et une ligne nav/principal/aside entre les deux. La ligne d’en-tête utilise une hauteur automatique, la ligne du milieu remplit l’espace restant et les deux colonnes latérales sont fixées à 200px tandis que la colonne principale prend le reste.
La mise en page du Saint Graal doit son nom au fait qu’elle était réellement difficile à réaliser de manière fiable avant CSS Grid — des années de hacks avec float, de mises en page en tableaux et de positionnement absolu ont tenté d’imiter cette forme exacte. Avec grid-template-areas, elle se réduit à cinq régions nommées et une poignée de tailles de piste, ce qui explique pourquoi elle reste l’exemple standard pour enseigner CSS Grid.
Chaque nombre et espacement sur cette page reste modifiable en direct : réduisez les colonnes latérales, ajoutez une quatrième ligne ou renommez une zone, et l’aperçu ainsi que le CSS copiable se mettent à jour immédiatement. Copiez les blocs CSS et HTML directement dans votre projet — tout s’exécute localement dans votre navigateur, rien n’est téléversé.