Resources:
Result:
css:
.header {
grid-area: header;
background-color: #fed330;
padding: 20px;
}
.content {
grid-area: content;
background-color: #20bf6b;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
background-color: #45aaf2;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #fd9644;
padding: 20px;
}
.grid {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
@media (max-width: 500px) {
.wrapper {
grid-template-columns: 4fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}
html:
<div class="grid">
<header class="header">Header</header>
<article class="content">
<h1>Content</h1>
</article>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>