Skip to content

Instantly share code, notes, and snippets.

@bendc

bendc/holy-grail.html

Last active December 15, 2017 19:50
Show Gist options
  • Save bendc/0193e99fa094baa7e4368b147e172c65 to your computer and use it in GitHub Desktop.
Save bendc/0193e99fa094baa7e4368b147e172c65 to your computer and use it in GitHub Desktop.
Download ZIP
Holy Grail Layout using CSS Grid
Raw
holy-grail.html
<!doctype html>
<title>Holy Grail Layout</title>
<style>
body {
display: grid;
grid-template-rows: 100px 1fr 100px;
grid-template-columns: 200px 1fr 200px;
min-height: 100vh;
margin: 0
}
header, footer {
grid-column-end: span 3
}
main {
grid-column-start: 2
}
nav {
grid-row-start: 2
}
aside {
grid-column-start: 3
}
</style>
<header></header>
<main></main>
<nav></nav>
<aside></aside>
<footer></footer>
@mrflix
Copy link

mrflix commented Apr 7, 2016

Demo: http://codepen.io/mrflix/pen/LNeNPB

@raphaelgoetter
Copy link

Hello @bendc :)

Some other Grid techniques :

Have fun :)

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