Holy Grail

HTML

<div class="parent">
   <header>...</header>
   <aside class="left-sidebar">...</aside>
   <main>...</main>
   <aside class="right-sidebar">...</aside>
   <footer>...</footer>
 </div>

CSS : Grid layout

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}
 
header {
  grid-column: 1 / 4;
}
 
.left-sidebar {
  grid-column: 1 / 2;
}
 
main {
  grid-column: 2 / 3;
}
 
.right-sidebar {
  grid-column: 3 / 4;
}
 
footer {
  grid-column: 1 / 4;
}

Bonus : vous ne voyez pas comment intégrer ce snippet ? Télécharger gratuitement ma CSS Layout toolbox ; c’est une collection de snippets prêtes à l’emploi.

← Retour vers la liste des mise en page