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

Top comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.