CSS Grid recipes for everyday use cases

Sometimes, creating the same thing over and over can be tedious. This section contains some code snippets for everyday use cases of CSS Grid. They’re meant as boilerplate code for further development and can ease the process of getting started.

Holy grail layouts

We can use the HTML structure in the following code snippet to create the layout:

<div class="layout">
  <header>
    Header
  </header>
  <aside>
    Sidebar
  </aside>
  <main>
    Content
  </main>
  <footer>
    Footer
  </footer>
</div>

We’ve added a single CSS class called layout to the div container. To apply the layout, we can use the following CSS:

:root {
  --sidebar-width: 1fr;
  --content-width: 3fr...