<div class="container">
<header>Header</header>
<aside>Sidebar</aside>
<main>Main area</main>
</div>
.container > * {
border: 4px solid black;
margin: 0.2rem;
padding: 1rem;
}
.container {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-areas:
"header header"
"sidebar sidebar"
"main main";
}
@media screen and (min-width: 600px) {
.container {
grid-template-areas:
"header header"
"sidebar main";
}
}
header {
grid-area: header;
}
aside {
grid-area: sidebar;
}
main {
grid-area: main;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.