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 a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

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.