⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

Holy Grail CSS Grid Layout — Ready Code

Design CSS Grid layouts visually: set columns, rows and gap, then type area names into cells to build grid-template-areas — with a live preview and copyable CSS and HTML.

Type a name into any cell below; cells with the same name merge into one grid-template-areas region.

Processing... 0%

Result

This page opens the grid generator preloaded with the holy grail layout: three columns and three rows, with header and footer spanning the full width and a nav/main/aside row in between. The header row uses auto height, the middle row fills the remaining space, and the two side columns are fixed at 200px while the main column takes the rest.

The holy grail layout earned its name because it was genuinely hard to build reliably before CSS Grid — years of float hacks, table layouts and absolute positioning tried to fake this exact shape. With grid-template-areas it collapses to five named regions and a handful of track sizes, which is why it remains the standard first example for teaching CSS Grid.

Every number and gap on this page is still live: shrink the side columns, add a fourth row, or rename an area and the preview and the copyable CSS update immediately. Copy the CSS and HTML blocks straight into your project — everything runs locally in your browser, nothing is uploaded.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Number inputs for 1–6 columns and rows, plus separate column-gap and row-gap controls that combine into one gap value when they match.
  • A named-areas mode: type an area name straight into any cell of the live grid; the tool builds a valid grid-template-areas string and warns when names do not form clean rectangles.
  • Copyable CSS block (display: grid, grid-template-columns/rows, gap, grid-template-areas) plus a matching HTML skeleton with one grid-area div per named region.

Key Benefits

✓ Type a name straight into any cell and matching names merge into one grid-template-areas region — no drag-selection, no guessing the quoted-string syntax by hand.
✓ The live preview grid resizes and recolors on every change, so you see the exact column and row tracks and every named region before copying a single line of CSS.
✓ Presets like the classic holy grail layout and a narrow sidebar give you a real, working grid-template-areas declaration to start from instead of a blank grid.

Use Cases

  • • Build the classic holy grail page shell — full-width header and footer with a nav/main/aside middle row — by typing area names instead of hand-writing grid-template-areas.
  • • Lay out a settings page or admin dashboard with a fixed-width sidebar next to a flexible content column and copy the exact CSS and HTML once the live preview looks right.
  • • Check that a set of named areas actually forms valid rectangles before shipping — the tool flags the exact names that would break grid-template-areas in the browser.