Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
simple css grid holy grail layout
#grid {
display: grid;
box-sizing: border-box;
width: 100vw;
height: 100vh;
grid-template-columns:
[start] minmax(auto, min-content)
[center] auto
[end] minmax(auto, min-content);
grid-template-rows:
[header] 2em
[middle] auto
[footer] 2em;
padding: 0;
grid-column-gap: 1px;
grid-row-gap: 1px;
background-color: #333;
}
.start { grid-column-start: start; }
.center { grid-column-start: center; }
.end { grid-column-start: end; }
.header { grid-row-start: header; }
.middle { grid-row-start: middle; }
.footer { grid-row-start: footer; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment