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.
Browser Compatibility
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.
Support
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.
License
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.
Unfortunately resizing the window in chrome makes the whole page solid green…
@russell07 – The green you are seeing is actually just the 16 green grid block elements stacked on top of one another as full-width blocks.
In other words, it’s working fine. But, I agree, the solid green looks a bit confusing… Would be nice if the author could put a border on those blocks, or number them, so it’s more clear what’s happening…
This grid looks very flexible. I like the 960px compatibility, 16col is more flexible for layouts, and I prefer the smaller gutter scale than the 12col version (40px is pretty honkin’ wide for a gutter, if you ask me!)
Some notes:
You can add a wider left and right margin of 50px on .container class, which adds 60px to the max width on .row class for a total of 1200px even. To my eye, wider left+right margins frames the content better, and it results in a slightly wider (thus more rewarding) max width.
I’ve also successfully added a five column grid by creating a new class with the CSS property:
.fiveblock {
width: 18%;
}
Five divs with the class .fiveblock sit nicely flush to the right edge with proper gutter spacing. Just make sure you add .fiveblock (or whatever you call your new class) to both 1140.css and mobile.css.
Great work, my friend! This is solid!
Couldn’t agree more. Here’s an alternate index page to give the demo page numbers, and a wee bit of bottom margin, so that you can see how the boxes format when stacked.
Cheers!
Great adaptation to 1140px. The framework seems to fail to stack at narrower widths on IE8.
Would you b able to drop a 24 column variant as well? Unfortunately, while I love 960, I do want to be able to design for a larger window while maintaining compatibility with the original design…
where is the JS file?
What JS file?
the one that’s included in the original 1140.
That’s for legacy browser support. I don’t support the idea of getting new technology in outdated browsers so I haven’t included it. It’s a standard script so you can add it yourself if you want.
What changes do I need to make to the 1140.css to have three equal size columns with gutters expand the length of the 1140 grid? Thank you.
You’ll have to use the 12 column grid for that.
I was hoping this could be a great solution, but tried loading the demo page on two different handheld devices and neither of them gave the “stacked” layout which is expected. Both showed the standard layout with floats etc. One device a current iPod Touch and the other a web capable smartphone. Both viewed in portrait orientation.
Too bad, this looked good.
If the devices don’t support media queries then it won’t work. Older iPods don’t.
Is there any .psd file for this? with the grids and stuff.
If not, is it simple to make one? With the right measures and all that.
Thanks!
I didn’t do a .psd, I might consider in the future. If you’re familiar with Photoshop then yes, you can do it yourself.
Yeah i can make the .psd, but i have some doubts about the measures.
Max Width : 1280 px
Columns : 46 px
Gutters: 23 px
MArgins : ? px
I don’t think i’m getting it right.
Help? ._.
For photoshop, you can use the superb free plugin called guideguide.me
But I don’t really know what widths to use.
This looked promising, but I cannot figure out how to make the grid with different size heights. for example, I want an eightcol to be a long one, like in blogs, but the right-hand one, a fourcol last being short. But seems like it does not accomodate this.
Can you give an example please?
This is a 16 column grid. To make any layout stretch the full width the sum of all column must equal 16. Your example equals 12.
Solid work. Thank you.
Great work! Just what I was looking for.
How difficult would it be to implement this for the Enlightenment theme?
Enlightenment is already powered by Bootstrap’s grid system. Why would you want to use this one?