Genesis CSS Column Classes | beyond the office

The Genesis Framework is one of the most popular for WordPress. They have a ton of great-looking child themes just waiting for you to add your own creative flair and create a fantastic website. I’ve even used them for some clients as a starting point for their site.

One of my favorite “hidden features” of Genesis is the built-in CSS for columns. I’m a fan of using CSS instead of adding plugins to do it as that just leads to additional style sheets that need to be loaded, which will increase load time and can negatively impact the performance of your site.

They’re pretty easy to use – just add the appropriate class(es) to a div tag surrounding the content you want in columns, like so:

Genesis Content Column Classes at work

<div class=”one-half first”> content</div>
<div class=”one-half’> content </div>

See that extra class on the first one, “first”? That changes the CSS rules regarding the left margin so they line up properly. You’ll need to add that to the first of each div in a ‘row’.

The code above will give you the following result:

Hide head under blanket so no one can see nya nya nyan prance along on top of the garden fence, annoy the neighbor’s dog and make it bark and all of a sudden cat goes crazy, yet you call this cat food. That box? i can fit in that box decide to want nothing to do with my owner today or sit in window and stare oooh, a bird, yum so annoy the old grumpy cat, start a fight and then retreat to wash when i lose.

Cat cat moo moo lick ears lick paws kitty poochy if human is on laptop sit on the keyboard furrier and even more furrier hairball. Sit and stare my water bowl is clean and freshly replenished, so i’ll drink from the toilet but lick butt.

Note – because of the way the Dashboard editor works in WordPress, you won’t see the columns there, but they should show corrently on the front end (unless you have an older version of Genesis or the CSS rules have been removed from or changed in your CSS file for some reason.

(Cat Lorem from catipsum.com)

Other CSS Column Classes

Other classes that you can add to your surrounding divs are:

one-half
one-third, two-thirds
one-fourth, two-fourths, three-fourths
one-sixth, two-sixths, three-sixths, four-sixths, five-sixths

The can be used in any combination to equal one (remember your fractions from elementary school?) So, you could do one-fourth first, one-half, one fourth. Or one-sixth first, one-third, one-third, one-sixth. Or one-half first, one-sixth, one-sixth, one sixth. See how that works?

If you have a license for Genesis framework, you can get more information on these Genesis CSS Column Classes in the documentation on their site. But you’ll need a login and password, so if you’re web developer licensed the framework for your site and you don’t own the license, you won’t have access to documentation.

Have you used Genesis Columns CSS Classes on your site? Share a link below to show how you’ve used them.