<div class="grid">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
.grid {
width: 100%;
max-width: 1260px;
margin: 0 auto;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px 1fr 50px;
}
/* Header should span all 3 columns. */
.header {
grid-column: span 3;
}
/* Content should span 2 of 3 columns. */
.content {
grid-column: span 2;
}
/* Footer should span all 3 columns. */
.footer {
grid-column: span 3;
}
/*
The following isn't required because the sidebar span 1 cell by default, and will therefor be placed in the empty grid cell next to the content
If you wanted to be explicit you could set the following:
.sidebar {
grid-column: span 1;
}
*/
body {
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
font-size: 16px;
}
.grid div {
background: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.