Column Class Generator

The Genesis stylesheet has a great feature called Column Classes. This allows you to easily break a page’s content into multiple columns.

But if you’re like me, you’ll receive design files from the client’s designer and she’s using a grid of her own. You should then update the CSS of the column classes to match this grid, but that can be a big hassle (and a lot of math).

I’ve done the hard work for you! Simply drop the page’s width and gutter (space between columns) in here, and it will create the column classes for you. You can then copy/paste it into your own theme.

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson


  1. Arun Sarathy says

    Wow, i am late to the party. But I see that the party is still on. I am loving this classes generator already. Thanks Bill!

  2. Morten says

    Thanks a lot for this! How can I modify the code to also set the same space between rows as for columns? If I for example have 4 columns, and 8 pictures in them (kind of a grid). There will be two rows / two pictures in each column, but the space between the upper and lower row is larger than between the columns… I want that to be the same as the gutter between the columns.