CSSintroevergreen
Grid Template Areas
Layouts as ASCII art.
Name regions of a grid in plain English, then assign children to them. The CSS reads like the layout it produces.
Holy Grail layout
HTML+CSS+JSintro Press Run to execute
The five children land exactly where their names appear in grid-template-areas: header and footer stretch the full width because their name fills all three columns, while nav, main, and aside sit side by side in the middle row sized by 160px 1fr 200px. The CSS block visually mirrors the rendered wireframe, which is the whole point of named areas.