The Holy Grail layout earned its name because it used to be frustrating to build. Designers wanted a clean header and footer with two sidebars flanking a main content column, but making those columns behave, especially responsively, often required hacks and workarounds.
That’s exactly the kind of problem Divi 5‘s Grid System is meant to solve. CSS Grid has always been one of the best tools for this layout, and Divi 5 brings Grid controls directly into the Visual Builder so you can set column ratios, spacing, and responsive behavior without leaving your workflow. In this post, we’ll build the Holy Grail layout step by step and fine-tune it for every device. Let’s get started!
What Is The Holy Grail Layout?
The Holy Grail layout features a header at the top, a footer at the bottom, and three columns in the middle. Your main content is positioned in the center column, which is typically the widest, while the left and right columns contain elements such as navigation or advertisements.
