The holy grail is a web page layout that has multiple, equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.
It consists of a Header, Footer, and three vertical columns.
It helps to understand the concepts of grid and flex.
The goal is not just to recreate the layout. Making it responsive is also important.
Currently, there are two widely accepted ways of generating this view Layout. They are using the:
- Flexbox
- Grid
This is done out by setting the display property to flex.
display: flex;This results in a new form of a container with new properties. The content can flow in any direction specified in (which can be row or column).
This is done out by setting the display property to gird.
display: grid;Made with 🖤 by Jainam Desai