Genesis content column classes

Genesis comes with the ability to create columns through the use of content classes. This allows you to split your content into two to six columns.

2-Columns

To add two columns of text, enter the text below into your post/page editor:

[html title="2 columns"]

<div class="one-half first">This can be text in paragraphs, lists or even images.</div>
<div class="one-half">This can be text in paragraphs, lists or even images.</div>
<div class="clearfix"></div>

[/html]

3-Columns

To add three columns of text, enter the text below into your post/page editor:

[html title="3 columns"]

<div class="one-third first">This can be text in paragraphs, lists or even images.</div>
<div class="one-third">This can be text in paragraphs, lists or even images.</div>
<div class="one-third">This can be text in paragraphs, lists or even images.</div>
<div class="clearfix"></div>

[/html]

4-Columns

To add four columns of text, enter the text below into your post/page editor:

[html title="4 columns"]

<div class="one-fourth first">This can be text in paragraphs, lists or even images.</div>
<div class="one-fourth">This can be text in paragraphs, lists or even images.</div>
<div class="one-fourth">This can be text in paragraphs, lists or even images.</div>
<div class="one-fourth">This can be text in paragraphs, lists or even images.</div>
<div class="clearfix"></div>

[/html]

6-Columns

To add six columns of text, enter the text below into your post/page editor:

[html title="6 columns"]

<div class="one-sixth first">This can be text in paragraphs, lists or even images.</div>
<div class="one-sixth">This can be text in paragraphs, lists or even images.</div>
<div class="one-sixth">This can be text in paragraphs, lists or even images.</div>
<div class="one-sixth">This can be text in paragraphs, lists or even images.</div>
<div class="one-sixth">This can be text in paragraphs, lists or even images.</div>
<div class="one-sixth">This can be text in paragraphs, lists or even images.</div>
<div class="clearfix"></div>

[/html]

You can place images within the div classes instead of text. This gives you great flexibility in styling your content layout. Check out this example in the use of column classes to display images.