CSS Grid Two-Column Layout with Header And Footer

A common layout that you’ll require is a CSS grid two-column layout with header and footer. In the past, even a simple layout like this wasn’t easy to do. With the new features in the Grid Layout Specification, it’s now trivial and easy to make responsive.

Here’s all the pertinent CSS:

.container {
  max-width: 940px;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 7px;
}

.header {
  grid-column-start: 1;
  grid-column-end: -1;
}

.footer {
  grid-column-start: 1;
  grid-column-end: -1;
}

@media (max-width: 800px) {
  .container {
    grid-template-columns: none;
  }
}
Code language: CSS (css)

You can view the full working CSS Grid two-column layout in the CodePen below:

Some customizations that you might consider:

• The container has a max-width set, but you can choose to remove that to get a full fluid width
• If you want to adjust the size of the sidebar, change the grid-template-columns values on the container
• If you want the sidebar on the right, just switch it in the HTML or use the order property