Two-Column Layout with Infinite Header and Footer Using CSS Grid

September 10, 2018

Oftentimes, you'll want the header and footer to go full-bleed while the rest of your page has a maximum width and is centered. Note that the header and footer don’t need to be positioned with Grid. They display per their HTML source order, just as they would if you didn’t use Grid on the page.

The Finished Example Layout

main

The Code

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

<div class="grid-container">
  <main class="content">
    <p>main</p>
  </main>

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

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

CSS
body {
  margin: 0;
}

/* Sections of Layout
-------------------------------------- */
/* I named it .grid-container to make it more clear to you which part of the page uses CSS Grid and which doesn't. As usual, the class name could be whatever you like. */
.grid-container {
  margin-top: 15px;
  margin-bottom: 15px;
}

@media screen and (min-width: 48em) {
  .grid-container {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    /* define the grid */
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-column-gap: 20px;
  }
}

@media screen and (max-width: 47.9375em) {
  .content {
    margin-bottom: 15px;
  }
}

/* Generic styles for demo purposes
-------------------------------------- */
.content,
.footer,
.header,
.sidebar {
  background-color: #ccc;
  padding: 1em;
  font-family: "Helvetica, Arial, sans-serif";
}

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

.sidebar {
  min-height: 200px;
}