A common layout that you’ll require is a CSS grid two-column layout with a header and a 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-widthset, 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-columnsvalues on the container - If you want the sidebar on the right, just switch it in the HTML or use the
orderproperty
