1
HTML/CSSAdvanced#css#units
HTML/CSSAdvanced#css#grid#layout-puzzle
What is the 'holy grail' layout and how is it built with Grid?
It's a classic layout with a header, footer, fixed-width sidebars, and a flexible center content area, historically hard to build with floats. CSS Grid makes it trivial using grid-template-areas or template-columns.
Example
body {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}