Here at the Shipyard we now use Bootstrap for basically all our projects (especially now there’s an official sass port). It’s a BIG framework, but it’s built cleverly so that you only need to import the modules you need for the current project.
So I’m working right now on a project built on a 12 column grid, but there are a number of design elements that call for 5 equal columns. In Gumby which we’ve used for a number of projects, you can create a grid with as many columns as you like on the fly, which is great. In Bootstrap it’s a wee bit different, but certainly no less powerful.
The markup was an unordered list of items. We created 5 columns using bootstraps own mixins like so:
ul {
@include make-row();
li {
@include make-sm-column( 2.4 );
}
}12 columns divided by 2.4 = 5 (20%). That is to say 5 equal columns.
I also needed to change the width of the gutter, which is really easy if you use the mixins:
ul {
@include make-row( 5px );
li {
@include make-sm-column( 2.4, 5px );
}
}This solution was adapted from an answer to this very question on Stack Overflow.