Mise en page du Saint Graal avec Grid

La mise en page du Saint Graal est un motif classique de conception web : une page pleine hauteur avec un en-tête, un pied de page et une section centrale à trois colonnes (barre latérale gauche, contenu principal, barre latérale droite). Elle était notoirement difficile à réaliser avec des éléments flottants ; la grille CSS la rend triviale.

Définissez la mise en page avec des zones de modèle et des lignes nommées : grid-template-areas représente la structure visuelle. Trois colonnes et trois lignes (l’en-tête s’étend sur toutes les colonnes, le pied de page aussi, et la zone centrale comporte trois colonnes) décrivent toute la mise en page dans un diagramme ASCII lisible.

Chaque élément enfant fait référence à sa zone par son nom : header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. La grille les place automatiquement.

La ligne centrale utilise 1fr, qui remplit toute la hauteur restante de la fenêtre d’affichage après l’en-tête et le pied de page à hauteur fixe. Cela garantit que les barres latérales et le contenu principal s’étendent toujours pour remplir la fenêtre d’affichage, sans calcul explicite de hauteur.

Sur mobile, utilisez une requête média pour redéfinir grid-template-areas en une pile sur une seule colonne : l’en-tête, la barre latérale, le contenu principal, le panneau latéral et le pied de page sont empilés verticalement. L’ordre du DOM est conservé ; seul le modèle visuel de la grille change. Les zones de grille rendent la restructuration adaptative lisible.

Sur tablette, supprimez le panneau latéral droit et agrandissez le contenu principal : redéfinissez en "header header" "sidebar main" "footer footer" avec grid-template-columns: 240px 1fr. Définissez aside { display: none } ou déplacez-le sous le contenu principal dans la définition des zones.

Ajoutez un espacement entre les pistes de la grille avec gap: var(--spacing-4). Appliquez les marges intérieures à l’intérieur de chaque zone plutôt que sur le conteneur de la grille afin de conserver un espacement cohérent. L’en-tête et le pied de page reçoivent généralement leurs propres marges intérieures horizontales, alignées sur la largeur maximale de la grille.

La zone du contenu principal peut elle-même être une grille : un article à deux colonnes avec une barre latérale à l’intérieur de la zone principale. Les grilles imbriquées permettent de créer la mise en page du contenu à l’intérieur de la structure de la page, sans hiérarchies complexes de classes ni positionnement profondément imbriqué.

Rendez l’en-tête fixe avec header { position: sticky; top: 0; z-index: 10; }. Dans une mise en page avec une grille, le positionnement fixe d’un élément enfant de la grille fonctionne comme prévu : l’en-tête reste en place tandis que le contenu principal, la barre latérale et le panneau latéral défilent en dessous.

Les deux barres latérales peuvent être fixes : nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Elles restent visibles pendant le défilement du contenu principal, créant une mise en page à trois panneaux où seul le centre défile.

Utilisez une grille pour les mises en page de structure de page bidimensionnelles comme le Saint Graal : la grille excelle à placer simultanément les éléments dans des lignes et des colonnes nommées. Utilisez des boîtes flexibles pour les mises en page de composants unidimensionnelles (éléments de navigation sur une ligne, contenu d’une carte dans une colonne) à l’intérieur des zones de la grille.

Qu’est-ce qui rend grid-template-areas particulièrement utile pour les mises en page adaptatives du Saint Graal ?

La grille CSS rend triviale la mise en page du Saint Graal, historiquement difficile : grid-template-areas nomme les régions, 1fr remplit la hauteur de la fenêtre d’affichage pour la ligne centrale et les requêtes média redéfinissent la carte des zones pour la réorganisation adaptative. Les en-têtes et les barres latérales fixes s’ajoutent sans complexité supplémentaire.