• Skip to primary navigation
  • Skip to main content

Josh Mallard

Who Summoned the Bearded Ginger?

  • Music
  • Food
  • Thoughts
  • Stay in touch

Adding additional column classes in Genesis

January 10, 2016 by Josh 1 Comment

ShareTweet
 
VIEWS

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.

Filed Under: Code, Design

Reader Interactions

Comments

  1. Sean Vandenberg says

    January 24, 2016 at 11:03 am

    Too funny – just a few days ago, I dropped a into a site I’m doing… and then realized that wasn’t an included option :). …Welp, it’s about to be now!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2025 · Josh Mallard · Sitemap

Website Development by LimeCuda

0 shares