Home › Page Patterns › Holy grail
Holy grail
Three columns plus a header and footer — the classic web layout.
The holy grail layout has a header on top, a footer at the bottom, and three columns in between: a left sidebar, a main content area, and a right sidebar. It got its name because for years it was hard to build with pure CSS.
Today, CSS Grid and Flexbox make it trivial. The pattern still suits dashboards and content-heavy sites, though many modern designs simplify to two columns or drop sidebars on mobile.