Web Grid

Do your eyes glaze over when talking about website grids? Don't worry – if you've never designed using a grid system, the CMS makes it easy. Our use of the grid system creates a sense of uniformity across all UNC pages and makes it easier for visitors to navigate our ever-growing web presence.

12-Column Foundation Grid

ZURB's Foundation is a semantic, readable and flexible framework that we have customized just for UNC. Regardless of page type, our templates consist of 12 equal-width columns spread across a portion of the screen. The biggest thing you need to know about this grid system is that when calling out certain size columns, they will usually equal 12 (but never more). You can use incomplete rows, but they behave a little differently.

Sidebar

Starter templates in master- and sub-sections let you choose whether or not you want a right-hand sidebar (which occupies 4 columns). With it on, you are left with 8 columns for main content. This is shown below.

Content Region (full)Content Region (8 columns wide)
Content Region (full)offset-1
Sidebar (full)Sidebar (3 columns wide)

Other options

Through the use of snippets, you can create columns to any size that you want. Learn more about using snippets.

Four Column Snippet

Content Region (full)Content Region (3 columns wide)
Content Region (full)Content Region (3 columns wide)
Content Region (full)Content Region (3 columns wide)
Content Region (full)Content Region (3 columns wide)

Three Column Snippet

Content Region (full)Content Region (4 columns wide)
Content Region (full)Content Region (4 columns wide)
Content Region (full)Content Region (4 columns wide)

Two Column Snippet

Content Region (full)Content Region (6 columns wide)
Content Region (full)Content Region (6 columns wide)

Variable Column Snippet

Use the Variable Column snippet to create columns of widths for which there is not already a snippet.

Content Region (full)Content Region (5 columns wide)
Content Region (full)Content Region (7 columns wide)

Content Region (full)Content Region (3 columns wide)
Content Region (full)Content Region (9 columns wide)

Content Region (full)Content Region (5 columns wide)
Content Region (full)Content Region (4 columns wide)
Content Region (full)Content Region (3 columns wide)

The default snippets build columns that will break, or collapse, on medium and smaller devices. You can use the Variable Column snippet to switch between the small, medium and large grids.

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

Devices with a width between 40.063em (641px) and 64em (1024px). Phones in landscape orientation and some tablets.

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