With many web development projects, you’ll find yourself reaching for a grid system to kick things off. Bootstrap and Foundation are usually the “go-to” for this, and that’s because they are both easy to use and easy to implement, while also boasting many features. Plus, they’re “battle tested”, so you more-or-less should know what to expect from the get-go.

Typically, responsive frameworks come with a 12 column grid system. This isn’t to say all of them do, but that is the typical flavor.

Some of us prefer a different flavor though.

Commonly, a front-end developer is given a PSD and told to recreate what they’re given. If you’re lucky, you are designs or wireframes for the variations in sizes as well. As development occurs, and different sizes of each page is being tweaked, you notice that the 12 column breakpoints just aren’t working. Sometimes you need a little more or a little less. There just isn’t that much granularity when dividing sections by 12.

The solution? Use 24 columns! You gain a lot more control over the widths of elements by doubling the grid. And since it IS double, it’s not hard to convert an existing 12 column layout into a 24 column layout. You simply multiply each column number by 2 to reach the same values. It’s relatively painless to do depending on how your website is structured, but of course is even easier when starting a brand new website.

To get a 24 column grid, use the Bootstrap Customizer or Foundation Customizer, and set the Columns to 24 (while also toggling what you need or what you don’t need).

It’s worth noting that having more columns DOES add some additional bloat to the CSS file, but it’s pretty negligible and the trade off is well worth it.