Two-Column Layout with CSS Grid

The classic site layout, done with Grid. And it couldn’t be simpler to achieve. I’ve specified that the header and footer should span all columns (grid-column: 1 / -1). Grid’s auto-placement algorithm takes care of the rest, placing the page sections in the grid per their source order.

The Finished Example Layout

header

main

sidebar

footer

The Code

HTML
<div class="container">
  <header class="header">
    <p>header</p>
  </header>

  <main class="content">
    <p>main</p>
  </main>

  <!-- Replace this <div> with <aside> if your content has an aside. For more than one, nest <aside> elements in the <div>. -->
  <div class="sidebar">
    <p>sidebar</p>
  </div>

  <footer class="footer">
    <p>footer</p>
  </footer>
</div>
  

CSS
/* Grid
-------------------------------------- */
/* Define the grid */
.container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 10px 20px;
}

/* Place items on the grid */
.footer,
.header {
  grid-column: 1 / -1;
}

/* Generic styles for demo purposes
-------------------------------------- */
.container {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 75rem;
}

.container > * {
  background-color: #ccc;
  padding: 1em;
}

/* Typically, you wouldn't specify a height or min-height on this, instead allowing your actual content (i.e., text, images, etc.) to dictate the height of your content area. But since this example has very minimal content, I've set a min-height to mimic a taller content area. */
.content {
  min-height: 350px;
}