Skip to content

Instantly share code, notes, and snippets.

@ai
Last active December 7, 2017 06:23
Show Gist options
  • Save ai/a1426ec4ad404119467c391522cf32a7 to your computer and use it in GitHub Desktop.
Save ai/a1426ec4ad404119467c391522cf32a7 to your computer and use it in GitHub Desktop.
body {
display: -ms-grid;
display: grid;
-ms-grid-rows: 30px auto 30px;
grid-template-rows: 30px auto 30px;
-ms-grid-columns: 3fr 1fr;
grid-template-columns: 3fr 1fr;
grid-template-areas: "🎩 🎩"
"πŸ” πŸ“°"
"πŸ‘ž πŸ‘ž";
}
.header {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: 🎩;
}
.nav {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: πŸ”;
}
.main {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: πŸ“°;
}
.footer {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: πŸ‘ž;
}
@OrenShalev
Copy link

Thank you! πŸ‘
I think there's a small mistake here: the nav gets 3fr and main only 1fr. πŸ˜‰

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment