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; } }

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
Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to SnippetsShow Comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!