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.
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.
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!
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.
Craig Grella says
You are a dynamo bill. thanks.
Kevin Donnigan: Anything Graphic says
Bill,
Thank you SO much for this, super helpful. And, of course, everything else you bring to the Genesis community.
Love and light.
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?
Bill Erickson says
It sounds like you’re adding the class directly to the p elements, so at mobile the margin is dropped.
It’s better to wrap the area in a div first. Something like this: https://gist.github.com/billerickson/327aacb6c48234cf7d2c
That way the div is responsible for the column breakdown without affecting the styling of the underlying elements (in this case, p’s).
Steve Borsch says
That did it Bill…thanks!
Tony says
This is a great tool if you don’t use SaSS
Clifton Griffin says
We’ve begun using neat for all grid related styling, including the scaffolding / structure of Genesis:
https://bitbucket.org/cgdinc/cgd-project-skeleton/src/c755246fb27a2fedffc6ed27f84230a2b287976e/themes/cgd-startup/assets/styles/_scaffold.scss?at=master
ClintN says
Is there anything obvious that I am missing to make the 5 column responsive?
Bill Erickson says
The columns should scale down proportionally. If you’d like them to go full width and stack on smaller screens you’ll need to add a media query. Something like this: https://gist.github.com/billerickson/4a2416e928684d16aec2