<div class="site">
<div class="top">top</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</div>
body {
margin: 0;
}
.site {
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 16rem;
grid-template-rows: auto 1fr auto;
}
.top {
background: blue;
color: white;
padding: 1rem;
grid-column: span 2;
}
.footer {
background: red;
color: white;
padding: 1rem;
grid-column: span 2;
}
.aside {
padding: 1rem;
background: lime;
}
.main {
padding: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.