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)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git