1. Home
  2. /
  3. Blog
  4. /
  5. Genesis framework
  6. /
  7. Advanced
  8. /
  9. Using Genesis Column Classes...

Using Genesis Column Classes To Build Layout Grids

Genesis Column Classes Video 1 (the basic idea)

Genesis Column Classes Video 2 (how it works)

Before we start using Genesis Column Classes, please note!

You will need to use some very basic HTML code

The easiest way to write code is using the text view in the WordPress editor.

The WordPress text view tab

BUT! If you try editing Genesis Column Classes code using the visual view tab in the WordPress editor WordPress might automatically delete some of your column class code. Because it doesn’t understand what you’re trying to do.

This doesn’t always happen. But when it happens to me it drives me nuts! So I think it’s safest to edit my code in text view.

So please remember. When you write or edit a page using Genesis Column Classes code, use the text view tab. Not the visual tab.

And a quick side note, you can also use the WordPress editor to write HTML that you can then paste into text widgets. I do that all the time. OK let’s get started.

Columns and rows

Using Genesis Column Classes you can divide your page into columns and rows using HTML divs with a class applied to them.

Simple example of Genesis Column Class code

You can make up to six columns per row using Genesis Column Classes. And you can make as many rows as you like. You can also mix and match the column widths. So for instance you could have a one-fourth, three-fourths layout. This gives you one narrow column and one wide column.

This is a one-fourth column class using Genesis Column Classes.
This is a three-fourths column class using Genesis Column Classes.

Or a one-half, one-half layout. This gives you two equal width columns.

This is a one-half column class using Genesis Column Classes.
This is a one-half column class using Genesis Column Classes.

If you stack rows of Genesis Column Classes on top of each-other you need to put an empty clearing div between the rows…
Genesis Column Classes clearfix-div
And the first div in any Genesis Column Classes row needs an extra class of first. So the code for a two column Genesis Column Class layout would look like this…
one half Genesis column class code

This is how the code works…

How Genesis Column class code works

These are the Genesis Column Classes you can use…

one-half
one-third
one-fourth
one-sixth
There is no one-fifth option.

You can build really useful layouts using Genesis Column Classes. And it really is easy once you understand how they work. For instance you could have, three narrow columns of links, followed by a wide column containing text or an image. These are the classes you would use to do this…
one-sixth first
one-sixth
one-sixth
three-sixths
clearfix
Genesis Column Classes three-sixths-one-half

Ready made code snippets

I’ve made some code snippets to help you get started using Genesis Column Classes…

The important points to remember when using Genesis Column Classes are…

The numbers must add up

For instance if you make a row divided into thirds, you could have a column one-third wide followed by a column two-thirds wide. When you add one-third and two-thirds you get the whole number of one. Just make sure the column widths you use, when added together, make the whole number of one. Such as one-fourth and three-fourths. Or one-sixth, one-sixth, one-sixth, three-sixths.

The first class

The first column in every Genesis Column Classes row needs the extra class of first. That’s important. So don’t forget!

Put the first class in the first div in a row.

The clearfix div

And after every row that uses Genesis Column Classes you need an empty clearfix div. The empty clearfix div makes sure any content below that point starts on a completely new line. If you don’t separate rows using the clearfix div your rows can look jagged or higgledy piggledy.

clearfix in Genesis Column Classes

Full width rows

If you have a layout that includes a full width row sandwiched between column classes such as this…

Content goes here.
Content goes here.
This is a full width div and it will span the full width of the content area of this page.

You don’t need any extra code to make the middle row span the full width and display as a single column. The row above ends with an empty clearfix div. So you can just type in your content and it will automatically span the whole page width. The clearfix div ended the row above cleanly. The row below starts with the extra class of first. Which makes that row start cleanly. So the full width row in the middle is cleanly separated from the rows above and below it.

Single row background color

However, if you want to style that single row by giving it a background color etc, you could put the content inside a div with a class, like this…
Adding a CSS class to a single row div in Genesis Column Classes If you wrap full width content in a div, don’t forget to add a custom class in your style sheet.

Genesis Column Classes are incredibly useful. And by learning just a little bit of code you gain loads of power over the layout of your pages.