Bill Erickson

Blog / Genesis Theme Framework

Column Class Generator

Written by Bill EricksonPublished on February 27, 2014Updated on February 10, 2020

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

Other articles in this series

Category Specific Search Form

October 14, 2019

Let users search through posts in a specific category. There are many ways to implement this. Pick the one that fits your needs.

My Genesis Starter Theme

April 28, 2011

I build custom Genesis child themes for most of my clients. Rather than starting from an existing StudioPress theme, I use my own starter theme: EA Genesis Child. What is…

Reader Interactions

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

Comments

  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.