Odd number of columns in an even column grid with Neat

Grrr!!!!
Square-peg/round-hole. You know the drill.

The last couple of projects we’ve needed to display columns of content in boxes (a la Pinterest but the boxes stretch), and as the browser width changed, the number of columns changed to suit. So at 960px wide, we’d have three columns. At 1200px, four columns. Mobile, one column. Pretty straight forward and not a big deal. We’ve been using Bourbon and Neat on a lot of projects for the past year or so and are big fans. Displaying columns as described above with Neat is, well, neat — though if you’re needing to change row breaks for responsive, I highly recommend Josh Fry’s omega-reset. It’s a serious pain without his sweet mixin.

If we’re using a basic twelve-column layout, I’ve got many options for the width of the boxes, two columns, three columns, four columns, six columns, and twelve columns. Great, you say, how could you need more? Well, this last project I needed five columns. Five! So I’m screwed because five doesn’t go into twelve, right?

Turns out it does and we all know how. Decimals. And, thankfully, the span-columns() mixin accepts decimals — in essence percentages of the column width.

So this is what my code looked like:

+media($desktop)
  +span-columns(3)
  +omega(4n)

+media($desktop-wide)
  +omega-reset(4n)
  +span-columns(2.4)
  +omega(5n)

There it is. Using decimals in the span-columns() can also work if you just need to space out some elements differently in a row, responsive or not. You can even use decimals in shift() if you need to center, let’s say, a five column wide block.

So what do you need? Seven columns? Nine columns? Eleven columns? The world is yours, my friend. By the way, if you have a layout that requires eleven columns, I’d really like to see that.

comments powered by Disqus