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


  1. Jamie Mitchell says

    Great stuff Bill

    I always hated the bootstrap classes that come with Genesis, the margins are just to small, now i can have 40-50 px margins in an instant!

    • Clifton Griffin says

      My clients are usually complaining that they are too big. 🙂

      I definitely prefer the way Genesis uses the first class instead of the row wrappers. Such a waste of markup.

    • Rudd says

      Second that. I’ve have the same problem. Looks like now every time I’m designing a theme, I need to replace the default column class that comes with Genesis with the one generated from this tool.

  2. Aaron says

    I’ve always wondered why the standard Genesis FW doesn’t include the one-fifth column class. Glad to see it’s fixed now!

  3. Selena Darter says

    Just got a new design with a different grid. Big sigh as I pull out the calculator and get ready to start the math. Then I remembered seeing this a while ago. THANK YOU. Such a huge time saver.

  4. Kevin Donnigan: Anything Graphic says


    Thank you SO much for this, super helpful. And, of course, everything else you bring to the Genesis community.

    Love and light.

  5. Steve Borsch says

    Nicely done Bill (as always). Love your tuts.

    Am past my “four hour rule” on being able to figure something out without asking for help. Wondering about one thing that I can’t seem to solve: When columns are responsive and become a single column is smaller window sizes, there is no longer a space between paragraphs. Makes columns appear to be one, very long, run-on paragraph.

    Any ideas?

Leave A Reply