i am a beginner with web design, while studying i came across the "holy grail layout" and i was just wondering why is it that the menu is vertically aligned while most modern websites tend to use a horizontally aligned menu.

holy grail layout

  • 3
    Could you share the reference that mentions this? It would make it easier for us to identify if there's a specific reason behind it Commented Oct 7, 2019 at 5:25

3 Answers 3


It could be because, back in 2001 when Rob Chandanais of BlueRobot came up with the pure CSS version of this layout, our monitors were much smaller and resolution wasn't as high. Websites had an infinite amount of vertical space, unless you wanted horizontal scrolling. Therefore you could have a lot more navigational items in the menu. Also, it was arguably a lot easier to add items to the vertical menu.

Things have come a long way since then and I don't think you have to have a vertical menu these days.

Ref: https://en.wikipedia.org/wiki/Holy_grail_(web_design)


I wouldn't bet by a 'Holy grail' of design. Design will always have tips and best practices but every year, every case, every user, evolves with the time and with their needs.

It's important to stay updated and have different references :)

  • yes, but this doesn't answer the question.
    – Luciano
    Commented Oct 8, 2019 at 15:31

The reference to the "holy grail" isn't because of the layout being the best possible design, but because this was a very popular layout that was very difficult to implement using CSS only techniques.

As Wikipedia puts it:

It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with the current technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

There are many sites, even today 18 years after the problem was named, that use this sort of layout. A common derivative has a main navigation as part of the header (and footer), with the Menu section on the diagram used for sub-navigation. That style also benefits from the "grail" search to actually implement the design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.