Understanding and Using the 12-Column Grid

Grid cover

Author NameLogan Garcia
August 10, 2017

Expert route

Proceed with caution! This advanced topic is designed for those who already have a strong understanding of the CMS. View beginner or intermediate topics instead.


If you have never designed using a grid system, you might have many questions about its benefits and why we are using it. Fear not—understanding the system is fairly easy and we are with you through all stages of your design.

Our use of the grid system creates a sense of uniformity across all UNC pages making it easier for visitors to navigate our ever-growing web presence.

When building templates, we took out the most complex parts about using the grid system. Everything you need to get started is available in just a matter of clicks through snippets—no coding required—but, there are many available options to further develop your design skills.

The Basics

Generally, you should be designing mobile-first. It’s much easier to get smaller elements to look nicer on large screens than it is to get large elements on a small screen.

Most columns in our template “break” or “stack” on smaller-sized screens—this happens with our default snippets—meaning that at that smaller size, they will occupy 100% of the available width. The variable column snippet lets you pick and choose the sizes of columns you want to use. A row contains our columns and makes them align nicely.

No More Than 12

When using the variable column snippet, your combined column widths cannot exceed 12 (if they do, they will fall apart and not look nice!). You can have incomplete rows (for example, with columns that only total 8), but they behave a little differently. More on this later.

Using the Variable Column Snippet

When you first insert the variable column snippet, you will see a basic table with two rows and columns. This is just the basic table transformations needed to work with the CMS. Here, each row will be a column and you specify the column width in the cell to the right of the "lorem ipsum" sample text.

Variable column screenshot

To see the table transformation in action, save and exit to preview the results. You should see two columns, a smaller one with a width of 4 and a larger one with a width of 8. Returning to JustEdit mode, notice the “medium-4” and “medium-8” in the table columns.

Small, Medium and Large Columns

Depending on the use case, you can replace medium with small or large. Medium tells the columns to break on small screens only (they will look the same on both medium and large screens). Similarly, large tells the columns to break on any screen size that isn’t large, so both medium and small.

On small screens

Small screens might include phones. Technically, any screen size that has a maximum width of 40em (or 640px).

Small columns
Small columns on small screen

Medium columns
Medium columns on small screen

Large columns
Large columns on small screen

On medium screens

Phones in landscape orientation and some tablets might be this size. If their width is between 40.063em (641px) and 64em (1024px), this is their size.

Small columns
Small columns on medium screen

Medium columns
Medium columns on medium screen

Large columns
Large columns on medium screen

On large screens

Any display that is between 64.063em (1025px) and 90em (1440px), such as a laptop or desktop computer.

Small columns
Small columns on large screen

Medium columns
Medium columns on large screen

Large columns
Large columns on large screen

Incomplete Rows and Offset Columns

You might notice a section we built where the text does not span across the whole page. Columns do not always need to total 12. If you don't use "end" (for example, "medium-4 end") in the variable column widget, the last column will align to the right.

Incomplete rows

In more advanced cases, you can create incomplete rows offset by a certain number of columns to get things looking just as you would like.

Offsets

For example, you could create a row with a column 8 wide, offset by 2. This row width only totals 10, but the 8-wide column will appear centered because both the first side is offset by 2. This might be helpful when using a row for a quote.

We also use incomplete rows with photo backgrounds. These are custom elements that you might not have access to build, but if you have a great photo that you would like to include, let us know!

Use Cases

There are many uses for using the variable column snippet! Here are just a few. Be sure to let us know if there is something you think we should feature. To see what they look like on different sized screens, resize your browser window or send this link to your phone: goo.gl/9tEzwY

Quote Rows

If you want to insert a quote on a row and emphasize it’s there, you could insert it in to a column with a width of 8 offset by 2 (medium-8 medium-offset-2).

Quote row screenshot

 

"Look at this awesome quote! It will not extend further than the width of our custom column."
-Logan

 

Icons (!!)

If you love icons as much as we do, you probably want to use them EVERYWHERE. Problem is that it can be difficult to align icons on a row and have them look nicely on mobile. If you have 4 icons, you could insert four columns each with a width of 3 that will not break on mobile ("small-3").

Icon row screenshot

 

thumbs_up_down

30 Revisions

timer

500+ Hours

free_breakfast

375 Cups of Coffee

important_devices

1 Beautiful Website

 

They will look like this on mobile:
1x4 icons on mobile

They will look like this on desktop:
1x4 icons on desktop

 

If your the text is too long, you can also nest variable column widgets (this gets complicated, so proceed with caution).

Icon row nested screenshot

 

thumbs_up_down

30 revisions to make it great

timer

500+ hours of dedicated teamwork

free_breakfast

375 cups of coffee from our favorite cafe

important_devices

1 beautiful website built just for you

 

They will look like this on mobile:
2x2 icons on mobile

They will look like this on desktop:
2x2 icons on desktop