<div class="container">
<div class="menu">MENU</div>
<div class="post">POST</div>
<div class="sidebar">SIDEBAR</div>
<div class="footer">FOOTER</div>
</div>
.container {
display: grid;
grid-template-columns: [first] 100px [second] 100px [third] 100px [fourth] 100px [last] 0;
grid-template-rows: [header] 50px [body] 300px [footer] 50px [end] 0;
* {
color: white;
text-align: center;
}
.menu {
background: coral;
grid-column: first / last;
grid-row: header / body;
}
.post {
background: #2196F3;
grid-column: first / fourth;
grid-row: body / footer;
}
.sidebar {
background: orange;
grid-column: fourth / last;
grid-row: body / footer;
}
.footer {
background: navy;
grid-column: first / last;
grid-row: footer / end;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.