Introduction: 3-Column Holy Grail Revisited
“A responsive multi-column website layout”
History of CSS Multi-Column Layouts
It is now close to 10 years ago that the so called Holy Grail 3-column design was published and web-developers started to experiment with responsive website design. A few years later (in 2006) the search for the "Holy Grail" 3-column layout came close to an end, the maximum was reached of what was possible with a CSS 2 based multi-column layout. The CSS 2 designs from that time weren't perfect (they were plagued by wrapper madness) but they did their job moderately well until the rise of smartphones and tablets.
Now, one decade later, time has come to recreate an updated "Holy Grail" multi-column layout which is reflecting and utilizing the extended features of CSS 3 and the radically evolved IT landscape which gets increasingly dominated by mobile devices. Since a few years the so called responsive design has become popular and succeeded over concepts like adaptive design and progressive enhancement.
Part 1: Layout - 3-Column Holy Grail Revisited
“Equal length columns - an innovative solution for an eternal problem”
In the beginning Tim Berners Lee created the web. But the web was empty because there were no commercial web-servers and no web-browsers. Marc Andreesen said: "There shall be a web-browser" and created Mosaic. And the web content had no form (no CSS, no table elements). And Marc Andreesen said: "Let there be structure" and so in 1995 Netscape introduced the table element. And web-developers used the table tags for multi-column layouts which were fluid and had the same length of all columns.
Web-developers used dirty tricks like stretched one pixel width images to force table columns to a specific size but web-designs were visually rich and creative and web-designers thought that everything was good. Then a few people saw that using tables for layout was not the right method and so they came up with CSS 2 based multi-column layouts for ending the abuse of semantic elements (HTML tables) for presentational purposes (layouts).
So web-developers started to create many different CSS 2 based multi-column layout techniques which are semantically seen better but were all suffering from several CSS 2 limitations, so e. g. no support for equal length columns.
Part 2: AdaptiPic - 3-Column Holy Grail Revisited
“Adaptive images - the foundation for true mobile support”
Requirements for a True Responsive Layout
The LiteSite multi-column layout which we developed in part 1 of this article series solves most problems for developers of classic desktop websites. Especially the equal length column issue which has plagued a whole generation of CSS 2 web-developers is now resolved for modern browsers in a semantically much cleaner way (only one column wrapper needed). So the next question is what is with mobile devices?
Part 4: FlexiGrid - 3-Column Holy Grail Revisited
“A truly flexible grid for responsive designs”
This "Holy Grail Revisited" project is focused to demonstrate that CSS column based layouts are not "out". Factually it is the opposite although some contemporary trends may paint a different picture. By making a column based layout responsive web-developers can realize robust, fast and easy to maintain responsive websites. But there are situations where CSS grids have clear advantages over a column based layout. But at the same time CSS grids have the tendency to bloat the HTML source code and aren't the easiest thing to maintain and usually difficult to customize. For adding an easy to setup, customize and maintain to the Holy Grail revisited project I have developed FlexiGrid. Nomen est omen! FlexiGrid is a CSS grid which represents a breakthrough regarding several common limitations of using CSS grids.