Holy grail layout
A page layout with a full-width header and footer, plus three columns of content between them.
The center column holds the main content; the left and right columns hold navigation and ancillary content. The header and footer span the full width. The name refers to how hard the layout was to achieve in pre-flexbox CSS — it required complex floats and negative margins. Modern CSS Grid makes it trivial.
Also called
3-column layoutheader-footer-three-columns
When to use
- Classic documentation or web app shells with nav + main + aside
- Dashboards with persistent navigation and secondary panels
When not to use
- Mobile-first layouts where three columns can't coexist on small screens
- Marketing pages where a single focused column reads better
Related
Source
Web vernacular; the name was popularized by Matthew Levine's 2006 A List Apart article 'In Search of the Holy Grail'.