A column about columns: Pro tips for manipulating your Shopify theme's columns

Update: Turbo 4.0+ and Artisan 1.0+ have moved to a percentage based grid. Because of this, using columns within other columns may cause issues with your layout after updating to either of these themes. 

Using column-based layouts is a great way to create more varied and eye-catching designs for your pages. However, designing columns that not only look good but also adapt to tablets and mobile phones can be tricky.

Thankfully, all Out of the Sandbox Shopify themes have a "built in" grid system that makes it easy to create multiple column layouts that are also fully responsive, which means that they will gracefully adapt their layout according to the screen size of the device the page is viewed on.

However, using the grid system can be a bit challenging and does require some knowledge of HTML, but we’ve assembled some hints and secrets to help get you on your way to being column-savvy.

Sweet 16

When creating multiple column layouts, the number to keep in mind is 16.

Out of the Sandbox themes are built on a framework that includes a 16 column base. Sixteen columns is an ideal number of columns because it creates enough flexibility for a variety of layouts while also being easily divisible by 2, 3, 4 and 8, so creating visually appealing column arrangements is easy.

It’s vital to distinguish, however, between the 16 column base that exists in the framework and the actual column divisions you are creating within that framework. The column divison you create can span one or more of the base columns but still be considered a single column division (and will appear that way on your finished page).

One way to think of it is that there are 16 slots, or columns, available to you as you go across the page. You can fill these slots in any combination you’d like, as long as you don’t go over.

For purposes of clarity, this article will refer to the columns you are creating as "column divisions" while the 16 base columns will always be referred to as "column base" or "base columns."

Spelling it out

Another thing to keep in mind is that, because CSS doesn’t handle class names that begin with numerals (1, 2, 3, etc.), numbers are always spelled out as words (one, two, three, etc.) within your HTML code. You should also always use all lowercase letters.

Containing yourself

Before you can begin using the base columns, be sure that your HTML is all placed within a <div> with the class name of "container" — otherwise the layouts won’t work. If you’re adding column layouts within your pages, products, blog articles or collection content, this has already been taken care of and isn’t necessary.

Also note that, in these cases, columns will still be confined to the width of the container, which is not the full width of the browser window.

Divide and conquer

When creating the code for your multicolumn page layouts, each column division will be contained within the <div> and </div> tags in your custom HTML (hence why we are referring to these as column divisions)

When creating multiple column layouts, you will mainly be concerned with the class name within the opening <div> tag. For the layout to work properly, all column-based divisions should start with:

<div class="columns">

Note that the word "columns" is in plural and should remain plural unless you choose to define a column division by "one column" (which would be 1/16th the width of the page container).

Then, to indicate the number of base columns the column division should extend over, we add that number before the word "columns":

<div class="eight columns">

Notice that space between the two words.

Alpha to omega

When creating your column divisions, you can also control when a new row of column divisions should start by adding the class name "alpha" (the first letter of the Greek alphabet and synonymous with "beginning") within the opening <div> tag:

For consistency, this should be added after the word "columns."

Likewise, if you want to "end" a row of column divisions before the full sixteen base columns have been covered, you can add the class name "omega." The word "omega" is the last letter of the Greek alphabet and roughly translates to "end":

Adding both "alpha" and "omega" to a single class name will likely cause undesirable results. If you find yourself only have one column division in a row, you can safely only use "alpha."

Even if you’ve used up all 16 base columns, it is still recommended that you include the "omega" class name for both consistency and so that the code understands that you’re beginning a new row, which can come in helpful when the layout is adjusted for smaller screen sizes.

You don’t have to use up all sixteen base columns in a single row. Just be sure to include the "omega" class name within your last column division so the browser knows to start a new row.

You can also wrap your column divisions inside a <div class="row"> tag that can be helpful in keeping your code organized and also adds a bit of margin below each row that prevents content from bumping into each other.

Putting it all together

Say you want to have a page with two rows of 4 columns each. You’ll want the first column division in each row to include the "alpha" in the class to indicate that it’s the beginning of a new row, and the last column division will include the "omega" class to signal the end of that row. Keeping in mind that you have a total of 16 base columns to work with across the page, you’ll also need a total of 4 column divisions that are each made up of 4 base columns (since 4 times 4 = 16):

Here's how this looks over the base grid:

Responsiveness

So, what happens to column layouts on smaller devices? Obviously, it would be difficult to fit more than two or so columns on a mobile device screen, so the framework will automatically stack columns into more rows when the screen size becomes too small.

Be sure to take this into consideration when creating your layouts as sometimes the new arrangement of stacking these sections on top of each other (instead of spanning the page in columns) can be a bit confusing to users.

If you want to hide certain content on mobile devices because it might not be helpful, you can add the class name "mobile_hidden" to it. Likewise, if something should only be shown on mobile devices (and not larger screen sizes), add the class name "mobile_only" — note that there is no tag, by default, called "desktop_only," however.

Fun with fractions

There are also three special classes that allow you to create column layouts divided into thirds and fifths. These are included in the framework because 16 can’t be divided evenly by 3 or 5, but having these types of layouts is a common need.

When using these special classes, it’s important to change the plural "columns" to the singular "column" for proper implementation.

<div class="one-third column"> creates a column that is one third (or 33.33 percent) wide. Note that the "one-third" is hyphenated.

<div class="two-thirds column"> creates a column is is two thirds (or 66.66 percent) wide. Note that "two-thirds" is hyphenated and plural.
<div class="one-fifth column"> creates a column that is one fifth (or 20 percent) wide. You can repeat this column division four more times to fill a row.

You can also 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:

This is especially helpful for sidebar type layouts or pages where you’d like a vertical photo beside some text. Also, note that you can move the sidebar or image to the right side of the page instead simply by flipping those two lines of code and swapping "alpha" and "omega":

Offsetting and centering

Also keep in mind that you can use the grid's offsetting feature to your advantage to create more flexible layouts.

Another useful implementation of the offsetting feature is to center a block of center in the middle of your page container.

To do this, first determine how many column widths you want the actual content to be. For best results, this should be an even number: <div class="six columns alpha">

Then, calculate the number of base columns left over by subtracting the column division width from 16. In this example, 16 - 6 = 10.

Then, divide this answer in half. In our example, this gives us five, which means we’ll want to offset this column division by five base columns: <div class="offset-by-five six columns alpha">

What this will do is leave five blank base columns, followed by six for our content. Since 5 + 6 = 11, we know we have five columns left to fill, which will automatically be assumed to be blank, assuming the next <div> tag has an "alpha" class in it.

It’s important to note that, for exact centering, the offset value has to be the same as the remaining columns that will be left blank. That said, however, you can also create some interesting layouts, such as staggered designs, by using the offset feature but purposely not leaving equal amounts of base columns on each side.