Skip to main content
Frontend Glossary

Layouts · Page frame

Holy Grail Layout

Also called: Three-column layout, 3-column layout, Two-sidebar layout

A full-width header and footer, with the middle row split into a left sidebar, main content and a right sidebar. Both sidebars have fixed widths and the main column stretches.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Use a holy grail layout for this page: a full-width header at the top and a full-width footer at the bottom. Split the middle into three columns: a 200px left column for category navigation, a 240px right column for trending picks and announcements, and a flexible main column in the middle with a min width of 480px. Build it with CSS Grid, and keep the footer at the bottom even when there's little content. When the screen is narrower than 768px, move both side columns below the main content.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Holy Grail Layout is what you need.

Use Holy Grail Layout when

  • The page has both navigation categories and side info that should stay visible on either side of the main content
  • Content sites like portals, forums and docs sites, where the main content is mostly for reading
  • Desktop screens with plenty of width, where you want to make full use of the horizontal space

Pick something else when

  • There's only navigation and no side info, so the right column would be empty or stuffed with filler

  • Users select a record on the left and need to see its details next to it

    Use insteadMaster-Detail Layout

  • Users mostly browse on phones and the screen can't fit three columns

  • The main content is a wide table or board that needs as much horizontal space as possible

    Use insteadSidebar Layout

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    The right column has nothing useful, so it gets stuffed with placeholder modules

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    No min width on the middle column, so it gets squeezed thin by the side columns as soon as the window shrinks

  3. 03

    All three columns stay as they are on narrow screens, each squeezed into a thin strip

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A header at the top and a footer at the bottom span the full width. The middle row has a fixed-width left column, a flexible main column and a fixed-width right column.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

The holy grail layout is a classic web page structure. There's a header at the top, a footer at the bottom, and a middle row split into three columns. The left column holds navigation or categories, the middle holds the main content, and the right column holds side info like recommendations, announcements or a table of contents. Both side columns have fixed widths (like 200px and 240px), and the middle column stretches with the window.

The name comes from the early days, when it was really hard to get right with float, so people jokingly called it the "holy grail" of web layouts. Today CSS Grid does it in a few lines.

Compared with a Sidebar Layout, it adds a right column, which suits portals, forums and docs sites that have both navigation and side info. Compared with a Master-Detail Layout, the three columns are independent: clicking in the left column usually switches the category or goes to another page, instead of opening the selected record's details next to it. On narrow screens, the side columns usually collapse or move below the main content.

Developer info
Term ID
layout-holy-grail
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-layout:has(> .ant-layout-sider ~ .ant-layout-content ~ .ant-layout-sider)
  • .el-container:has(> .el-aside ~ .el-main ~ .el-aside)
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026