<section class="container">
<header>header</header>
<article>article</article>
<aside>aside</aside>
<footer>footer</footer>
</section>
.container {
display: grid;
grid-template-columns: 150px auto 100px;
grid-template-rows: 50px calc(100% - 80px) 30px;
}
header {
background: rgba(255,0,0,.3);
grid-column: 1/4;
}
article {
background: rgba(0,255,0,.3);
grid-column: 1/3;
}
aside {
background: rgba(0,0,255,.3);
}
footer {
background: rgba(255,255,0,.3);
grid-column: 1/4;
}
.container {
padding: 10px;
border: 1px solid #999;
height: 300px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.