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.
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!
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.
Simply awesome – thanks 🙂