Holy grail layout
The classic page frame: header and footer across the page, fixed-width sidebars, and a center column that absorbs the remaining space.
See it
What it is
The holy grail is the classic full-page frame: a header across the top, a footer across the bottom, two fixed-width sidebars, and a center column that takes whatever width remains. It earned the dramatic name because making all three columns equal height, source-order friendly, and fluid was painfully awkward with tables and floats in the early web. Matthew Levine's 2006 A List Apart article In Search of the Holy Grail is where the name stuck.
CSS Grid makes it ordinary now. Reach for it in documentation, admin tools, portals, and dense editorial pages where navigation lives on one side and supporting material lives on the other. The sidebars are fixed in width, not fixed to the viewport.
Gotcha: the three-column version runs out of room quickly. Let either sidebar collapse or move below the article at a real content breakpoint, and use minmax(0, 1fr) for the center track so a long URL or wide table cannot force the whole page past the viewport.
Ask AI for it
Build a responsive holy grail page with CSS Grid: header and footer spanning all columns, 16rem left and right sidebars, and a fluid center track defined as minmax(0, 1fr). Use grid-template-areas for the five regions and min-height: 100dvh with grid-template-rows: auto 1fr auto. Keep the article first in the meaningful reading order. Below 900px, move the right sidebar below the article; below 640px, stack all three content regions and turn the left navigation into a disclosure.