<div class="grid">
<header>
Header
</header>
<aside class="sidebar-left">
Left Sidebar
</aside>
<article>
Article
</article>
<aside class="sidebar-right">
Right Sidebar
</aside>
<footer>
Footer
</footer>
</div>
.grid {
display: grid;
grid-template-columns: 150px auto 150px;
grid-gap: 1em;
}
header, footer {
grid-column: 1 / 4;
}
@media all and (max-width: 700px) {
aside,
article {
grid-column: 1 / 4;
}
}
/* Demo Specific Styles */
body {
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
header,
aside,
article,
footer {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 25vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.