DEV Community

Cover image for Holy Grail Flexbox Layout 🎃
Akram A. Abdelbasir
Akram A. Abdelbasir

Posted on


Holy Grail Flexbox Layout 🎃

The Holy Grail Layout is a well-known CSS issue that has had a number of remedies throughout time. If you're not aware of the background of the Holy Grail layout, this A List Apart article provides a decent overview and links to some of the most well-known alternatives.

The Holy Grail Layout Gif Image

Exactly like in the image above, a page with a header, footer, and three columns makes up the Holy Grail Layout's basic structure. The left and right columns have supplementary material, such as navigation or adverts, while the center column is home to the primary text.

Unfortunately, none of the traditional remedies to this issue have ever been able to completely achieve all of these aims due to the nature of these objectives and the original CSS constraints.

Finally, a comprehensive solution is feasible with Flexbox.

HTML Code:

Holy Grail Flexbox Layout Html code

CSS Code:

Holy Grail Flexbox Layout Css code

You can access the code from here

Latest comments (0)

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout 😆