How Do I Divide a Page into Thirds or Other Fractions?

Out of the Sandbox themes support special classes that allow you to create column layouts divided into thirds and other fractions (fifths, sixths, sevenths - availability depending on your theme) using our built in grid framework.

When using these classes, you must change the plural "columns" class name to a the singular "column" for this to work. 

Thirds (Turbo, Retina, Parallax, Responsive, Mobilia, Artisan)

Following along with the details in this helpful article, your page layout can be divided into equally spaced thirds, with content filling one or two of the thirds, using this HTML markup:

<div class="one-third column">

... which creates a column that is one third (or 33.33 percent) wide. Note that the "one-third" is hyphenated.

<div class="two-thirds column">

... which creates a column is is two thirds (or 66.66 percent) wide. Note that "two-thirds" is hyphenated and plural.

You can create a staggered two column layout with one column being a third and the second being two thirds by using the "one-third" and "two-thirds" classes in two divisions, one after another:

<div class="one-third column alpha">First column division content</div>
<div class="two-thirds column omega">Second column division content</div>

This code is helpful for sidebar type layouts. To move the sidebar to the right side of the page,  simply flipping those two lines of code and swapping "alpha" and "omega":

<div class="two-thirds column alpha">First column division content</div>
<div class="one-third column omega">Second column division content</div>

Other Fractions

Select your theme:

• Turbo
• Parallax
• Retina
• Mobilia
• Responsive
• Artisan
• Superstore

• Turbo

  Fifths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced fifths using this HTML markup:

  <div class="one-fifth column alpha">First column division content</div>
  <div class="one-fifth column">Second column division content</div>
  <div class="one-fifth column">Third column division content</div>
  <div class="one-fifth column">Fourth column division content</div>
  <div class="one-fifth column omega">Fifth column division content</div>

  ... which creates five columns that are one-fifth (or 20 percent) wide. Note that there are no "two-fifth", "three-fifth", etc. classes available.

  Sixths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced sixths using this HTML markup:

  <div class="one-sixth column alpha">First column division content</div>
  <div class="one-sixth column">Second column division content</div>
  <div class="one-sixth column">Third column division content</div>
  <div class="one-sixth column">Fourth column division content</div>
  <div class="one-sixth column">Fifth column division content</div>
  <div class="one-sixth column omega">Sixth column division content</div>

  ... which creates six columns that are one-sixth (or 16.6 percent) wide. Note that there are no "two-sixth", "three-sixth", etc. classes available.

  Sevenths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced sevenths using this HTML markup:

  <div class="one-seventh column alpha">First column division content</div>
  <div class="one-seventh column">Second column division content</div>
  <div class="one-seventh column">Third column division content</div>
  <div class="one-seventh column">Fourth column division content</div>
  <div class="one-seventh column">Fifth column division content</div>
  <div class="one-seventh column">Sixth column division content</div>
  <div class="one-seventh column omega">Seventh column division content</div>

  ... which creates seven columns that are one-seventh (or 14 percent) wide. Note that there are no "two-seventh", "three-seventh", etc. classes available.

• Parallax

  Fifths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced fifths using this HTML markup:

  <div class="one-fifth column alpha">First column division content</div>
  <div class="one-fifth column">Second column division content</div>
  <div class="one-fifth column">Third column division content</div>
  <div class="one-fifth column">Fourth column division content</div>
  <div class="one-fifth column omega">Fifth column division content</div>

  ... which creates five columns that are one-fifth (or 20 percent) wide. Note that there are no "two-fifth", "three-fifth", etc. classes available.

• Retina

  Fifths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced fifths using this HTML markup:

  <div class="one-fifth column alpha">First column division content</div>
  <div class="one-fifth column">Second column division content</div>
  <div class="one-fifth column">Third column division content</div>
  <div class="one-fifth column">Fourth column division content</div>
  <div class="one-fifth column omega">Fifth column division content</div>

  ... which creates five columns that are one-fifth (or 20 percent) wide. Note that there are no "two-fifth", "three-fifth", etc. classes available.

• Mobilia

  Fifths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced fifths using this HTML markup:

  <div class="one-fifth column alpha">First column division content</div>
  <div class="one-fifth column">Second column division content</div>
  <div class="one-fifth column">Third column division content</div>
  <div class="one-fifth column">Fourth column division content</div>
  <div class="one-fifth column omega">Fifth column division content</div>

  ... which creates five columns that are one-fifth (or 20 percent) wide. Note that there are no "two-fifth", "three-fifth", etc. classes available.

• Responsive

  Fifths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced fifths using this HTML markup:

  <div class="one-fifth column alpha">First column division content</div>
  <div class="one-fifth column">Second column division content</div>
  <div class="one-fifth column">Third column division content</div>
  <div class="one-fifth column">Fourth column division content</div>
  <div class="one-fifth column omega">Fifth column division content</div>

  ... which creates five columns that are one-fifth (or 20 percent) wide. Note that there are no "two-fifth", "three-fifth", etc. classes available.

• Artisan

  Fifths

  

  Following along with the details in this helpful article, your page layout can be divided into equally spaced fifths using this HTML markup:

  <div class="one-fifth column alpha">First column division content</div>
  <div class="one-fifth column">Second column division content</div>
  <div class="one-fifth column">Third column division content</div>
  <div class="one-fifth column">Fourth column division content</div>
  <div class="one-fifth column omega">Fifth column division content</div>

  ... which creates five columns that are one-fifth (or 20 percent) wide. Note that there are no "two-fifth", "three-fifth", etc. classes available.

• Superstore

  Halves

  Superstore is limited to halved columns to split text on a page (50%).

  Take a vertical column of text and turn it into a balanced grid of content by using this framework:

  <div class="grid">
  <div> 
  <h2>Heading column 1</h2> 
  <p>Content for column 1</p> 
  </div> 
  <div> 
  <h2>Heading column 2</h2> 
  <p>Content for column 2</p> 
  </div> 
  <div> 
  <h2>Heading column 1, row 2</h2>
  <p>Content for column 1 row 2</p>
  </div>
  <div>
  <h2>Heading column 2, row 2</h2>
  <p>Content for column 2, row 2</p>
  </div>
  </div>