Adding additional column classes in Genesis

For a while there it seemed like everyone that considered themselves a front-end developer had their own preferred grid solution. I’ve used the grids available with Foundation and Bootstrap as well as others on different occasions but never developed a fond attachment to anyone one system.

So, when I switched to using the Genesis Framework as the foundation for the majority of client projects, I had no allegiance to any grid system and found the general structure of the the default theme along with the available column classes (based on bootstrap) to be sufficient. For the most part…

Calculating additional columns

The first limitation that I noticed was when a design called for 5 columns of content. Thankfully, the column classes available within Genesis can be easily extended.

There is a basic calculation that you can use to create your new column classes. The following formula can be used to calculate the size of your column where “X” equals the number of columns you need:

(100 - (X - 1) * 2.564102564102564)/X

To break this down a little bit, we’re starting with a row that is 100%. To get our column percentage, we first need to remove our gutters (the space between the columns). Genesis uses “margin-left: 2.564102564102564%” to calculate the gutter with a “margin-left: 0;” being applied to the first column. This is why we reduce our total desired columns by “1” before multiplying by our gutter width. Once gutter width is removed from our total width, we can divide by the number of columns to get the needed width of each individual column.

So, for the five columns that I needed, the calculation would be:

(100 - (5 - 1) * 2.564102564102564)/5 = 17.948718

This means that the width of my five columns needs to be 17.948718% wide.

Adding them to our stylesheets

To make the new “one-fifth” class available within your theme, you just need to add the following to your CSS file:

Note

If you’re like me, my starter child theme has the parent stylesheet copied into it. So, rather than copying the above individually into my stylesheet, I add the additional class in line where the default column classes are defined.