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.

Tutorial

Receive New Posts by Email

Comments

  1. So, you’re saying this is easier than going to the Bootstrap 2.x customizer, changing the base gutter and column size, generating it, unzipping it, finding the column classes, and then manually copying and pasting over the new values, doing the class conversion in your head. (ie, span4 = one-third)?

    I happen to have done that two or three times this week, by happenstance.

    This is an awesome utility. And nearly perfect timing 🙂

    Clif

  2. Man, I feel like you read people’s minds when you publish content 🙂 I am in the process of building a wp.org theme and I was thinking about integrating this exact thing into it 🙂

    thanks!

    1. 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.

  3. 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. 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?

  5. 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.

Leave a comment