<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div>
<div class="box footer">Footer</div>
</div>
// The grid
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
max-width: 960px;
margin: 0 auto;
}
.header { grid-area: header }
.sidebar { grid-area: sidebar }
.content { grid-area: content }
.footer { grid-area: footer }
body {
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
font-size: 16px;
}
.box {
background: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.