Mise en page du Saint Graal

Cette mise en page classique du Saint-Graal comprend un en-tête, un pied de page, une barre latérale gauche, une barre latérale droite et un contenu principal. Elle est semblable à la précédente mise en page, mais inclut désormais des barres latérales.

Pour écrire toute cette grille en une seule ligne de code, utilisez la propriété grid-template. Vous pouvez ainsi définir à la fois les lignes et les colonnes.

La paire propriété/valeur est grid-template: auto 1fr auto / auto 1fr auto. La barre oblique entre la première et la deuxième liste séparée par des espaces correspond au saut entre les lignes et les colonnes.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

Comme dans le dernier exemple, où l'en-tête et le pied de page étaient dimensionnés automatiquement, les barres latérales gauche et droite sont automatiquement dimensionnées en fonction de la taille intrinsèque des enfants. Toutefois, il s'agit cette fois d'une taille horizontale (largeur) au lieu de verticale (hauteur).

HTML

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

CSS

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}