holy-grail.css

/**
 * @description Classic holy grail layout using CSS Grid — header, footer, main, two sidebars.
 * @tags layout, grid, responsive, classic
 */
.holy-grail-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(180px, 240px) 1fr minmax(180px, 240px);
  grid-template-areas:
    "header  header  header"
    "nav     main    aside"
    "footer  footer  footer";
  min-height: 100vh;
}

.holy-grail-header { grid-area: header; }
.holy-grail-nav    { grid-area: nav; }
.holy-grail-main   { grid-area: main; }
.holy-grail-aside  { grid-area: aside; }
.holy-grail-footer { grid-area: footer; }

@media (max-width: 768px) {
  .holy-grail-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "nav"
      "aside"
      "footer";
  }
}