Inspired by the 12 column 1140px grid system by Andy Taylor, the 16 Columns 1140px CSS grid system uses the same fluid principle, but is served on 16 columns with thinner gutters to serve websites where such a layout fits better and to be more compatible with the classic 960px grid system. It fits perfectly on a 1280 pixel wide monitor and adapts to the screen’s width on smaller displays. It is compatible up to mobile displays, where it stacks the columns on top of each other to allow the content to stand out. You can download the layout below or view a live demo:
The idea came to me after attempting to apply the grid layout to a design I already adapted for the 960px grid system with 16 columns. It was a design on 3 columns, with a main content area and 2 sidebars. After several attempts I just couldn’t find a way to align to the grid and still give the design a consistent look. My main concern was the sidebar area being able to support usual content and standard ad sizes, for which I found great support on the 16 column layout. And then then after some calculations I found a nice combination to turn this grid into a 16 columns one, and guess what: the content fitted perfectly even on smaller screens.
Compatible with the 960px Grid System
Because the design I was working on was already implemented for the 960px grid system, which I still wanted to support, I wanted to make it compatible with this layout to ensure the content areas preserved their proportions. So when the grid is set to a fixed dimension of 940px (+20px in margins) the layout looks about the same as the 960px grid system on 16 columns, you can make a test drive if you want to see the similarities.
Thinner Gutters and Columns
At full width the gutters are about 23px in width and the column about 46px. At a fixed width of 960px the gutters are about 20px in width and columns about 40px. I’ll have to be honest and admit I put more accent on achieving compatible dimensions on the 960px grid system then getting to rounded numbers on the 1140px one. Still, the dimensions are pretty close to common ones and the widths in percentages are no greater than 2 digits.
The grid system works perfect on Firefox, Safari, Internet Explorer 8 and 9. For IE 6 and 7, some 1.3% of the layout’s width were sacrificed to allow all columns to fit in the same row. Some minor and unnoticeable inconsistencies are also in the Opera browser. On mobile smartphones it works as expected; the columns stack on top of each other and each column is presented in one row.
For any support questions regarding this grid system, please use the General section at the Forum. Please use the comment section on this page only for feedback messages.
As the original, this work is licensed under Creative Commons BY-SA. The license is really just to comply with the original, I personally don’t impose any restrictions on its usage and don’t require any attribution, I actually haven’t included any.
Enjoy it and please let me know how it has helped you.