The more modern grail (named so for their utility and difficulty to create) layout these days is the typical "docs layout" you'll see on a good docs page. These usually involve
- Three columns
- A left side fixed, scroll-able column
- A right side sticky, scroll-able column. Sometimes aligned to window, sometimes aligned to the inner column.
- An inner column that max-widths to a readable width
- A sticky header
- Content within the inner column that itself will scroll (think code blocks) and will respect the center column width, sometimes for stylistic reasons breaking outside of that width (images in article layouts).
- Responsive rules to drop the right column, and make the left column a togglable nav.
^^ the above is surprisingly tricky to pull off, though you see it commonly in well built documentation systems.
Looking back at screenshots of my first website from 2005, it follows the same format. We had a header on top, some navigation on the left, announcements and a shoutbox on the right, articles in the middle, and a simple footer. It's interesting how this design seems to be timeless.
Why is this called the holy grail layout? From the name I assumed it would work everywhere, but that looks like it only works on desktops.
It seems like grid layout was explicitly designed for this, and for the same reason I wonder why people are so amazed by grid when it doesn't seem to have any particular features for scaling down to mobile sizes.
For a long time in the 90s and00s this was the layout a huge portion of the internet used.
If I remember right, it was called the holy grip layout because it was surprisingly tricky to get right and was a big motivator for responsive layouts and media queries (hope I'm not mixing up my history these days!)
Correct. It was named (in fun) because of its general utility, but also because it was extremely difficult to pull off before we started to get tools like flex-box. Before flex came around, this type of layout was really only able to be built with tables. During this time there was a movement to stop using tables for layouts (since it wasn't semantic) but this particular layout was very difficult to pull off then (when floats were the more common layout mechanism).
Before flex-box, Bootstrap (which I believe did not use tables) was the design-system du jour for at least a year, with which the holy grail layout would have been pretty straightforward.
Glad you mentioned Bootstrap, because it was such a breath of fresh air when it came out.
I have a slightly different take than the rest of the comments at the moment. It wasn't that the "holy grail" layout was terribly different to achieve for any particular browser, it's that it was so damn hard to get it to work on all of them simultaneously. They all interpreted the relevant properties just differently enough that what worked well for one completely screwed everything up on another.
That even understates the complexity, because it wasn't even differences between browsers as such, it was different versions of the same browser, or the same browser on different operating systems - and then combine those two statements to achieve a metastasizing web of suck.
We developed a whole toolkit of hacky tricks to hide certain things from certain browsers, and reveal them to others. We had epic fights with non-technical management to persuade them to allow us to drop support for a particular browser / version that made life particularly difficult.
When frameworks came along - js, as well as css: I'll always love jquery (and before it prototype and scriptaculous) with all my heart - they made all of that just... Go Away. You wrote one .js file and one .css file, with a couple of includes, and it Just Worked. It was magic.
What amazes me is that frameworks from that era still work! I have a personal website for a (non-technical) project that remains near and dear to my heart. The code is vintage 2010: jquery and a stripped-down bootstrapish css framework, with php includes in every file. (Updates went by SFTP, if you want a really "OK boomer" laugh at my expense.) I last updated it in 2014, to add a "permanent hiatus" message (sob!), and literally haven't touched it since. It... Still looks great, even on mobile. All the js works, and degrades gracefully. Layout resizes nicely. Fonts render fine. It's an artifact, and a monument to what, in retrospect, feels to me like a particularly human-scale internet ecosystem.
I haven't written much production code in a decade, but I hire and direct really talented developers, so I've kept my hand in. I don't hate modern methods, by any means - among other things, they so much more productive than what we had back in the day: the velocity of development is wonderful - but I do wonder, if I were to walk away from a similar site, built on today's web technologies, will it still be functional in a decade's time?
I know: not a fair comparison. Still, thank you for indulging my saunter down memory's lane.
I always assumed it's called this because of the shape: two "bowls" at the top and bottom, handle in the middle/center? But I don't know, it's just my personal theory.
You can make it even holier by removing the right column. I'm kinda tired of sites pretending my 4k monitor with 200% scaling is a portrait mobile phone from 2012.
- Three columns
- A left side fixed, scroll-able column
- A right side sticky, scroll-able column. Sometimes aligned to window, sometimes aligned to the inner column.
- An inner column that max-widths to a readable width
- A sticky header
- Content within the inner column that itself will scroll (think code blocks) and will respect the center column width, sometimes for stylistic reasons breaking outside of that width (images in article layouts).
- Responsive rules to drop the right column, and make the left column a togglable nav.
^^ the above is surprisingly tricky to pull off, though you see it commonly in well built documentation systems.
For an example, here's one I built https://xata.io/docs/concepts/file-attachments