Disposition de la grille CSS du Saint Graal - Code prêt
Concevez visuellement les mises en page de grille CSS : définissez les colonnes, les lignes et les espaces, puis saisissez les noms de zones dans les cellules pour créer des zones de modèle de grille - avec un aperçu en direct et des CSS et HTML copiables.
Résultat
Cette page ouvre le générateur de grille préchargé avec la disposition du Saint Graal : trois colonnes et trois lignes, avec un en-tête et un pied de page couvrant toute la largeur et une ligne de navigation/principale/de côté entre les deux. La ligne d'en-tête utilise la hauteur automatique, la ligne du milieu remplit l'espace restant et les deux colonnes latérales sont fixées à 200 px tandis que la colonne principale prend le reste.
La mise en page du Saint Graal mérite son nom car elle était vraiment difficile à construire de manière fiable avant CSS Grid - des années de hacks flottants, de dispositions de tableaux et de positionnement absolu ont tenté de simuler cette forme exacte. Avec les zones de modèle de grille, il se réduit à cinq régions nommées et à une poignée de tailles de piste, c'est pourquoi il reste le premier exemple standard pour l'enseignement de CSS Grid.
Chaque numéro et chaque lacune de cette page sont toujours actifs : réduisez les colonnes latérales, ajoutez une quatrième ligne ou renommez une zone et l'aperçu et le CSS copiable sont immédiatement mis à jour. Copiez les blocs CSS et HTML directement dans votre projet : tout s'exécute localement dans votre navigateur, rien n'est téléchargé.