Skip to content

Instantly share code, notes, and snippets.

@wdiasvargas
Created Nov 13, 2018
Embed
What would you like to do?
<style>
body {
margin: 0;
}
.container {
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas: "header header header" "nav main aside" "footer footer footer";
grid-gap: .75em;
height: 100vh;
}
@media (max-width: 768px) {
.container {
grid-template-rows: 1fr 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas: "header header header" "nav nav nav" "main main aside" "footer footer footer";
}
}
@media (max-width: 480px) {
.container {
display: block;
}
}
.container header {
grid-area: header;
background-color: teal;
}
.container nav {
grid-area: nav;
background-color: tomato;
}
.container main {
grid-area: main;
background-color: lightblue;
}
.container aside {
grid-area: aside;
background-color: orange;
}
.container footer {
grid-area: footer;
background-color: lightgreen;
}
</style>
<div class="container">
<header>HEADER</header>
<nav>NAV</nav>
<main>MAIN</main>
<aside>ASIDE</aside>
<footer>FOOTER</footer>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment