CSS Holy Grail Layout
The holy grail layout has a full-width header, a three-column middle row with main content flanked by two sidebars, and a full-width footer. It was a benchmark for CSS layout difficulty for over a decade because floats could not achieve it cleanly without faux-column background hacks, JavaScript height equalizers, or table-based scaffolding that broke semantics. CSS Grid solves it in roughly ten lines of code and produces a layout that is responsive, accessible, and easy to maintain. FixTools generates the complete Grid ruleset, including named areas, column widths, row heights, and a stacked mobile fallback, ready to copy and apply. The result works at any viewport, requires no JavaScript, and reads from the source code like a literal diagram of the page.
- Cost
- Free forever
- Sign-up
- Not required
- Processing
- In your browser
- Privacy
- Files stay local
Generates the complete holy grail Grid container ruleset
Uses named grid areas for readable, maintainable CSS
Supports one-sidebar and two-sidebar variants
CSS Tool
Grid Flexbox Builder
All processing happens in your browser — your files are never uploaded to any server.
🚀Open Grid Flexbox Builder100% Free · No account · Works on any device
The Holy Grail Layout: Why It Was Difficult and How CSS Grid Solves It
The holy grail layout is the classic web page structure: a full-width header at the top, a row with a left sidebar, a centre main content column, and a right sidebar in the middle, and a full-width footer at the bottom. The challenge with older CSS techniques was that floated columns could not achieve equal heights without JavaScript or the faux-column background image trick. Table-based layouts produced the right structure but with the semantic and accessibility problems of non-tabular data in table elements. Flexbox improved matters but required careful nesting and explicit height calculations. The layout became a benchmark problem for CSS because it exposed limitations in every layout technique available before Grid.
CSS Grid solves the holy grail layout directly. grid-template-areas maps the visual structure in plain text: "header header header" / "left main right" / "footer footer footer" defines all five regions with their correct spanning behaviour. grid-template-columns: 200px 1fr 200px sets fixed sidebars and a flexible centre. grid-template-rows: auto 1fr auto lets the header and footer size to their content and the middle row fill all remaining height. Each semantic HTML element gets grid-area: header, grid-area: left, grid-area: main, grid-area: right, or grid-area: footer. The entire layout is in roughly ten lines of CSS and the named areas string makes the structure immediately readable.
Making the holy grail layout responsive requires a single media query. The default CSS for narrow screens stacks all regions in a single column: grid-template-areas: "header" / "main" / "left" / "right" / "footer" with grid-template-columns: 1fr. A media query at 768px or wider switches to the three-column template. The grid-area assignments on each element stay identical at both breakpoints because the names do not change. The responsive reflow is entirely controlled by the container, keeping the breakpoint logic in one place. This is a complete, accessible, responsive page skeleton with no floats, no JavaScript, and no browser-specific workarounds.
Accessibility is the part of the holy grail layout that many implementations get subtly wrong. Visual ordering through grid-area can place the main content visually before the sidebars even when sidebars come first in the HTML source, which is convenient for design but can confuse screen readers and keyboard navigation if the source order is illogical. The right approach is to put the elements in DOM order that matches their importance for assistive technology: header first, then main content, then sidebars, then footer. The grid-area declarations then reposition them visually without breaking the underlying reading order. Keyboard users tabbing through the page reach the main content before the sidebars, which matches the visual reading order on desktop and the stacked order on mobile.
How to use this tool
Open the Grid Generator in named areas mode, define header, left-sidebar, main, right-sidebar, and footer regions, set column widths and row sizes, then copy the complete ruleset including area assignments for each section element.
How It Works
Step-by-step guide to css holy grail layout:
- 1
Define the five named areas
Assign names to your five regions: header, left sidebar, main content, right sidebar, and footer. Use simple one-word names that match your HTML section element classes or IDs.
- 2
Build the grid-template-areas string
Arrange the names into three row strings: header spanning all columns, the three content regions side by side, and footer spanning all columns.
- 3
Set column widths and row heights
Enter sidebar widths in pixels and set the centre column to 1fr. Set row heights to auto for header and footer, 1fr for the middle row if the layout should fill viewport height.
- 4
Copy and apply the ruleset
Click Copy CSS to copy the container rules and grid-area declarations for each child. Apply the container CSS to your wrapper element and each grid-area value to the corresponding section element.
Real-world examples
Common situations where this approach makes a real difference:
Documentation site with navigation sidebar
A documentation site uses a one-sidebar variant with a left navigation sidebar and main content area. The holy grail template with a single sidebar produces grid-template-areas: "header header" / "nav main" / "footer footer" with grid-template-columns: 260px 1fr. The navigation sidebar is always visible and the main content area fills all remaining width at any viewport size.
News site with advertising sidebars
A news site uses the full two-sidebar layout for article pages: a left navigation sidebar and a right advertising sidebar flanking the article body. The grid-template-columns: 180px 1fr 300px gives the ad sidebar more width than the navigation. On mobile the sidebars stack below the article, which the media query controls by reordering the named areas string to place main first.
Admin dashboard shell
An admin panel uses the holy grail structure for its outer shell: a top application bar, a left navigation rail, a main content panel, and a bottom status bar. The footer area is repurposed as the status bar, keeping the named-area structure intact. grid-template-rows: 56px 1fr 28px sets fixed heights for the header and footer rows while the content row fills remaining height.
Blog with tag sidebar
A blog uses a right sidebar for tag cloud and related posts beside the article main content. The two-column variant uses grid-template-areas: "header header" / "main sidebar" / "footer footer" with grid-template-columns: 1fr 280px. The sidebar is 280px fixed; the article area fills all remaining width. The footer and header span both columns automatically because the name repeats across both column cells. On mobile the sidebar drops below the article so readers reach the post itself first, then encounter tags and related posts as a follow-on section.
When to use this guide
Use this when building a page skeleton with a persistent header, main content area, one or two sidebars, and a footer that spans the full width at any viewport size.
Pro tips
Get better results with these expert suggestions:
Use min-height: 100vh on the grid container for full-height layouts
The middle row of the holy grail layout fills remaining height only when the container is taller than the content. Adding min-height: 100vh to the grid container ensures the layout fills the full viewport height even when content is short, which prevents the footer from appearing in the middle of the page on sparse content pages.
Match grid-area names to your HTML element IDs or class names
Using the same name in grid-area as in your HTML class or ID (such as class="sidebar" with grid-area: sidebar) makes the connection between CSS and HTML immediately obvious. It also makes the named areas string readable as a description of the actual DOM structure rather than an abstract layout diagram.
Reorder named areas in mobile media queries to improve reading flow
On mobile, place the main content area first in the stacked column template, above the sidebars. Users arriving on mobile should see the content they came for before navigating sidebars. Reorder the grid-template-areas string in your mobile default or small-screen media query to put main before left and right.
Use overflow: auto on the main content area for scrollable content panels
If the grid container uses min-height: 100vh with the middle row set to 1fr, the main content area has a fixed height equal to the viewport minus header and footer. Adding overflow: auto to the main element makes it independently scrollable, which is the standard behaviour for a fixed application shell where only the content area scrolls.
Frequently asked questions
Related guides
More use-case guides for the same tool:
Related tools
Other tools you might find useful:
CSS Formatter
Format the generated layout CSS for readability.
CSS Validator
Validate the generated CSS before adding it to your project.
HTML Element Builder
Build the HTML structure that your grid or flexbox layout applies to. Holy grail layouts remain relevant in modern UI design even though many sites now use single-column mobile-first patterns. Dashboards, IDE-style web apps, and content management systems still benefit from the persistent sidebar plus main content arrangement that the layout enables natively in CSS Grid. Modern holy grail implementations increasingly use grid-template-areas with explicit named areas, replacing earlier float-based and Flexbox approaches that required complex source order workarounds. The named area approach makes the layout immediately understandable to anyone reading the stylesheet, and refactoring breakpoint behavior becomes a matter of redefining the grid-template-areas value rather than rewriting selectors. For dashboard applications, this maintenance benefit alone justifies adopting modern grid syntax. The holy grail layout history dates back to early CSS development when achieving equal-height columns with sidebars required complex float and clear hacks. Modern Grid implementations solve the problem natively without any of the historical complexity. Holy grail layouts pair well with CSS subgrid for nested components that need to align to the parent grid tracks. Without subgrid, achieving consistent alignment across nested grids required JavaScript-based measurement workarounds. Subgrid eliminates this entirely, making complex layered layouts feasible in pure CSS for the first time. Modern browsers all support subgrid as of recent versions. The pattern works particularly well for documentation sites and content management dashboards. Both contexts require persistent navigation, a content area that scrolls independently, and optional auxiliary panels. Modern grid implementations handle these requirements with explicit named areas that any developer can read and modify without needing to memorize positional grid track syntax. Modern documentation tools like Docusaurus, Astro, and Nextra adopt holy grail patterns by default since the layout proves reliable for content-heavy sites. Familiarity with the pattern is essentially mandatory for documentation engineers and developer advocates building learning resources. Many learning resources walk through the holy grail pattern as an early CSS Grid milestone since it surfaces multiple grid concepts (named areas, fr units, auto-place children, responsive area redefinition) in one practical example.
Ready to get started?
Open the full Grid Flexbox Builder — free, no account needed, works on any device.
Open Grid Flexbox Builder →Free · No account needed · Works on any device