Holy Grail Layout Summary

Two days earlier wrote a blog about full screen layout and non-full screen layout, where the non-fullscreen speak a little bit of content, this time to talk about the full screen layout of some content, is the Holy Grail layout.

This site is the use of the so-called Holy Grail Layout, which is characterized by the site's left menu bar is fixed width, and the right side of the content area is not fixed width, can be stretched adaptively, by the current width of the browser to determine its width. In the layout method of the Web page, there are many kinds of column layout, and the Holy Grail layout is so many columns in the common is also commonly used, because it can do a column or even a multi-column fixed, a column width adaptive, as for the specific use of the layout of the way to see our needs.

So how does the specific Grail layout approach be implemented by code? We can take a look at this website.

I do not know if you understand, these three pieces of code is very good interpretation of the Holy Grail layout points.

First, our outermost box, Page-container, is 235px by setting a margin-left or padding-left, making the outermost box empty at the left 235px position in the layout.

Then, we page-container the child element, that is, our left menu bar Page-sidebar, at this time by a fixed width of 235px, while using position positioning or margin-left=-235px this way of writing, Let our left column return to the original vacated position.

Finally, our content area only needs to be set to a width of 100%, and our Grail layout is finished.

Holy Grail Layout Summary