Grids

Fully customizable and responsive CSS grids.

Introduction to Pure Grids

Pure Grids are easy to work with, and very powerful. There are a few simple concepts to keep in mind:

Grid containers

Grid classes vs. unit classes

Pure Grids consist of two types of classes: the grid class (cw-g) and unit classes (cw-u or cw-u-*)

.cw-g {
    /* Webkit: collapse white-space between units */
    letter-spacing: -0.31em; 
    /* reset IE < 8 */
    *letter-spacing: normal;
    /* IE < 8: collapse white-space between units */ 
    *word-spacing: -0.43em; 
    /* Webkit: fixes text-rendering: optimizeLegibility */
    text-rendering: optimizespeed;

Fonts and Grids

Using Grids with Your Font-Family

Pure Grids use a specific font stack to ensure the greatest OS/browser compatibility, and by default grid units will have font-family: sans-serif; applied — this is the default font stack Pure's Base (normalize.css) applies to <html>, <button>, <input>, <select>, and <textarea> elements. Fortunately, it's quite easy to make sure your project's font stack applies to all content when using Pure. Instead of applying your font-family to only the <body> element, apply it like this:

When setting the primary font stack, apply it to the Pure grid units along with html, button, input, select, and textarea. Pure Grids use specific font stacks to ensure the greatest OS/browser compatibility.

Font Stacks

The following font stack makes Pure Grids work on all known environments, with the preceding letterd and word spacing.

  • FreeSans: Ships with many Linux distros, including Ubuntu

  • Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and Arial to get picked up by the browser, even though neither is available in Chrome OS.

  • Droid Sans: Ships with all versions of Android.

  • Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.

    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

Flexbox

Use flexbox when possible to avoid letter-spacing side-effects.

NOTE: Firefox (as of 25) does not currently support flex-wrap, so the -moz- prefix version is omitted.

    display: -webkit-flex;
    -webkit-flex-flow: row wrap;

    /* IE10 uses display: flexbox */
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
    
    /* Prevents distributing space between rows */
    -ms-align-content: flex-start;
	-webkit-align-content: flex-start;
	align-content: flex-start;
}

Opera support

Opera as of 12 on Windows needs word-spacing. The ".opera-only" selector is used to prevent actual prefocus styling and is not required in markup.

.opera-only :-o-prefocus,
.cw-g {
    word-spacing: -0.43em;
}

Pure column unit

For when you want a column unit with no specific width.

.cw-u {
    display: inline-block;
    *display: inline; /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

Column unit font reset

Resets the font family back to the OS/browser's default sans-serif font, this the same font stack that Normalize.css sets for the body.

.cw-g [class *= "cw-u"] {
    font-family: sans-serif;
}

Column units with widths

How column units work

The widths of the units are fractions

Units have various class names that represent their widths. For example, cw-u-1-2 has a width of 50%, whereas cw-u-1-5 would have a width of 20%.

All child elements of a grid must be units

Child elements contained within an element with a cw-g classname must be a grid unit with a cw-u or cw-u-* classname.

Content goes inside grid units

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

When setting a font-family in your project, be sure to check out the section on using Grids with your font-family.

Let's start with a simple example. Here's a grid with three columns:

Applying Padding and Borders to Grid Units

To add borders and padding to Pure Grids, you have two options. The first option is to nest a <div> inside each Grid unit and style the child container:

Then use your class like so:

The second option is to add borders and padding directly to a grid unit. This would ordinarily risk breaking the layout, but you can easily avoid this problem by augmenting the behavior of the grid itself with a box-sizing: border-box rule:

And then:

Using box-sizing: border-box keeps your markup cleaner, but has two minor drawbacks. Legacy browsers such as IE 7 and below lack support for box-sizing, and setting this property on all grid units makes it harder to override or unset the value later on. As an unopinionated library, Pure lets box-sizing remain at the default value of content-box and leaves the choice up to you.

Grids Units Sizes

Pure ships with both a 5ths and 24ths based grid. Depicted below are the available units that can be appended to the cw-u-* classname where * is one of the unit fractions listed below. For example the unit classname for 50% width is: cw-u-1-2.

5ths-Based Units

24ths-Based Units

.cw-u-1,
.cw-u-1-1,
.cw-u-1-2,
.cw-u-1-3,
.cw-u-2-3,
.cw-u-1-4,
.cw-u-3-4,
.cw-u-1-5,
.cw-u-2-5,
.cw-u-3-5,
.cw-u-4-5,
.cw-u-5-5,
.cw-u-1-6,
.cw-u-5-6,
.cw-u-1-8,
.cw-u-3-8,
.cw-u-5-8,
.cw-u-7-8,
.cw-u-1-12,
.cw-u-5-12,
.cw-u-7-12,
.cw-u-11-12,
.cw-u-1-24,
.cw-u-2-24,
.cw-u-3-24,
.cw-u-4-24,
.cw-u-5-24,
.cw-u-6-24,
.cw-u-7-24,
.cw-u-8-24,
.cw-u-9-24,
.cw-u-10-24,
.cw-u-11-24,
.cw-u-12-24,
.cw-u-13-24,
.cw-u-14-24,
.cw-u-15-24,
.cw-u-16-24,
.cw-u-17-24,
.cw-u-18-24,
.cw-u-19-24,
.cw-u-20-24,
.cw-u-21-24,
.cw-u-22-24,
.cw-u-23-24,
.cw-u-24-24 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.cw-u-1-24 {
    width: 4.1667%;
    *width: 4.1357%;
}

.cw-u-1-12,
.cw-u-2-24 {
    width: 8.3333%;
    *width: 8.3023%;
}

.cw-u-1-8,
.cw-u-3-24 {
    width: 12.5000%;
    *width: 12.4690%;
}

.cw-u-1-6,
.cw-u-4-24 {
    width: 16.6667%;
    *width: 16.6357%;
}

.cw-u-1-5 {
    width: 20%;
    *width: 19.9690%;
}

.cw-u-5-24 {
    width: 20.8333%;
    *width: 20.8023%;
}

.cw-u-1-4,
.cw-u-6-24 {
    width: 25%;
    *width: 24.9690%;
}

.cw-u-7-24 {
    width: 29.1667%;
    *width: 29.1357%;
}

.cw-u-1-3,
.cw-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%;
}

.cw-u-3-8,
.cw-u-9-24 {
    width: 37.5000%;
    *width: 37.4690%;
}

.cw-u-2-5 {
    width: 40%;
    *width: 39.9690%;
}

.cw-u-5-12,
.cw-u-10-24 {
    width: 41.6667%;
    *width: 41.6357%;
}

.cw-u-11-24 {
    width: 45.8333%;
    *width: 45.8023%;
}

.cw-u-1-2,
.cw-u-12-24 {
    width: 50%;
    *width: 49.9690%;
}

.cw-u-13-24 {
    width: 54.1667%;
    *width: 54.1357%;
}

.cw-u-7-12,
.cw-u-14-24 {
    width: 58.3333%;
    *width: 58.3023%;
}

.cw-u-3-5 {
    width: 60%;
    *width: 59.9690%;
}

.cw-u-5-8,
.cw-u-15-24 {
    width: 62.5000%;
    *width: 62.4690%;
}

.cw-u-2-3,
.cw-u-16-24 {
    width: 66.6667%;
    *width: 66.6357%;
}

.cw-u-17-24 {
    width: 70.8333%;
    *width: 70.8023%;
}

.cw-u-3-4,
.cw-u-18-24 {
    width: 75%;
    *width: 74.9690%;
}

.cw-u-19-24 {
    width: 79.1667%;
    *width: 79.1357%;
}

.cw-u-4-5 {
    width: 80%;
    *width: 79.9690%;
}

.cw-u-5-6,
.cw-u-20-24 {
    width: 83.3333%;
    *width: 83.3023%;
}

.cw-u-7-8,
.cw-u-21-24 {
    width: 87.5000%;
    *width: 87.4690%;
}

.cw-u-11-12,
.cw-u-22-24 {
    width: 91.6667%;
    *width: 91.6357%;
}

.cw-u-23-24 {
    width: 95.8333%;
    *width: 95.8023%;
}

.cw-u-1,
.cw-u-1-1,
.cw-u-5-5,
.cw-u-24-24 {
    width: 100%;
}

Pure Responsive Grids

Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It's a robust and flexible grid that builds on top of the default grid.

Pure's Regular Grid vs. Responsive Grid

The best way to understand the difference between Pure's regular grid and a responsive grid is through an example.The snippet below shows how regular Pure Grids are written. These grids are unresponsive. They'll always be width: 33.33%, irrespective of the width of the screen.

Next, let's look at a responsive grid. Elements within this grid will be width: 100% on small screens, but will shrink to become width: 33.33% on medium-sized screens and above.

Default Media Queries

When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. Pure's default responsive grids comes with the following class names and media query breakpoints.

Key CSS Media Query Applies Classname
None None Always .cw-u-
sm @media screen and (min-width: 35.5em) ≥ 568px .cw-u-sm-
md @media screen and (min-width: 48em) ≥ 768px .cw-u-md-
lg @media screen and (min-width: 64em) ≥ 1024px .cw-u-lg-
xl @media screen and (min-width: 80em) ≥ 1280px .cw-u-xl-*

Using Relative Units for Widths

You may have noticed that we use em for our default CSS Media Query widths instead of px. This was a conscious decision since it allows the Media Queries to respond appropriately when people zoom the webpage. Check out this article by Brad Frost for some background information on using relative units within Media Queries.

If you do want to use units other than em, you can always modify the default Media Queries on the Get Started page. Converting from em to px is pretty simple:

1em == 16px*

* The em to px conversion is based on the browser's default font size, which is generally 16px, but can be overridden by a user in their browser settings.

Responsive Images

When using Responsive Grids, you'll want your images to be fluid as well so they grow and shrink with the content, while maintaining the correct ratio. To do this, just add the .cw-img class on them. Check out the example below.

@media screen and (min-width: 35.5em) {
    .cw-u-sm-1,
    .cw-u-sm-1-1,
    .cw-u-sm-1-2,
    .cw-u-sm-1-3,
    .cw-u-sm-2-3,
    .cw-u-sm-1-4,
    .cw-u-sm-3-4,
    .cw-u-sm-1-5,
    .cw-u-sm-2-5,
    .cw-u-sm-3-5,
    .cw-u-sm-4-5,
    .cw-u-sm-5-5,
    .cw-u-sm-1-6,
    .cw-u-sm-5-6,
    .cw-u-sm-1-8,
    .cw-u-sm-3-8,
    .cw-u-sm-5-8,
    .cw-u-sm-7-8,
    .cw-u-sm-1-12,
    .cw-u-sm-5-12,
    .cw-u-sm-7-12,
    .cw-u-sm-11-12,
    .cw-u-sm-1-24,
    .cw-u-sm-2-24,
    .cw-u-sm-3-24,
    .cw-u-sm-4-24,
    .cw-u-sm-5-24,
    .cw-u-sm-6-24,
    .cw-u-sm-7-24,
    .cw-u-sm-8-24,
    .cw-u-sm-9-24,
    .cw-u-sm-10-24,
    .cw-u-sm-11-24,
    .cw-u-sm-12-24,
    .cw-u-sm-13-24,
    .cw-u-sm-14-24,
    .cw-u-sm-15-24,
    .cw-u-sm-16-24,
    .cw-u-sm-17-24,
    .cw-u-sm-18-24,
    .cw-u-sm-19-24,
    .cw-u-sm-20-24,
    .cw-u-sm-21-24,
    .cw-u-sm-22-24,
    .cw-u-sm-23-24,
    .cw-u-sm-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .cw-u-sm-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .cw-u-sm-1-12,
    .cw-u-sm-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .cw-u-sm-1-8,
    .cw-u-sm-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .cw-u-sm-1-6,
    .cw-u-sm-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .cw-u-sm-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .cw-u-sm-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .cw-u-sm-1-4,
    .cw-u-sm-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .cw-u-sm-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .cw-u-sm-1-3,
    .cw-u-sm-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .cw-u-sm-3-8,
    .cw-u-sm-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .cw-u-sm-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .cw-u-sm-5-12,
    .cw-u-sm-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .cw-u-sm-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .cw-u-sm-1-2,
    .cw-u-sm-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .cw-u-sm-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .cw-u-sm-7-12,
    .cw-u-sm-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .cw-u-sm-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .cw-u-sm-5-8,
    .cw-u-sm-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .cw-u-sm-2-3,
    .cw-u-sm-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .cw-u-sm-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .cw-u-sm-3-4,
    .cw-u-sm-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .cw-u-sm-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .cw-u-sm-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .cw-u-sm-5-6,
    .cw-u-sm-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .cw-u-sm-7-8,
    .cw-u-sm-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .cw-u-sm-11-12,
    .cw-u-sm-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .cw-u-sm-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .cw-u-sm-1,
    .cw-u-sm-1-1,
    .cw-u-sm-5-5,
    .cw-u-sm-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 48em) {
    .cw-u-md-1,
    .cw-u-md-1-1,
    .cw-u-md-1-2,
    .cw-u-md-1-3,
    .cw-u-md-2-3,
    .cw-u-md-1-4,
    .cw-u-md-3-4,
    .cw-u-md-1-5,
    .cw-u-md-2-5,
    .cw-u-md-3-5,
    .cw-u-md-4-5,
    .cw-u-md-5-5,
    .cw-u-md-1-6,
    .cw-u-md-5-6,
    .cw-u-md-1-8,
    .cw-u-md-3-8,
    .cw-u-md-5-8,
    .cw-u-md-7-8,
    .cw-u-md-1-12,
    .cw-u-md-5-12,
    .cw-u-md-7-12,
    .cw-u-md-11-12,
    .cw-u-md-1-24,
    .cw-u-md-2-24,
    .cw-u-md-3-24,
    .cw-u-md-4-24,
    .cw-u-md-5-24,
    .cw-u-md-6-24,
    .cw-u-md-7-24,
    .cw-u-md-8-24,
    .cw-u-md-9-24,
    .cw-u-md-10-24,
    .cw-u-md-11-24,
    .cw-u-md-12-24,
    .cw-u-md-13-24,
    .cw-u-md-14-24,
    .cw-u-md-15-24,
    .cw-u-md-16-24,
    .cw-u-md-17-24,
    .cw-u-md-18-24,
    .cw-u-md-19-24,
    .cw-u-md-20-24,
    .cw-u-md-21-24,
    .cw-u-md-22-24,
    .cw-u-md-23-24,
    .cw-u-md-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .cw-u-md-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .cw-u-md-1-12,
    .cw-u-md-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .cw-u-md-1-8,
    .cw-u-md-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .cw-u-md-1-6,
    .cw-u-md-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .cw-u-md-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .cw-u-md-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .cw-u-md-1-4,
    .cw-u-md-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .cw-u-md-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .cw-u-md-1-3,
    .cw-u-md-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .cw-u-md-3-8,
    .cw-u-md-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .cw-u-md-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .cw-u-md-5-12,
    .cw-u-md-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .cw-u-md-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .cw-u-md-1-2,
    .cw-u-md-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .cw-u-md-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .cw-u-md-7-12,
    .cw-u-md-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .cw-u-md-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .cw-u-md-5-8,
    .cw-u-md-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .cw-u-md-2-3,
    .cw-u-md-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .cw-u-md-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .cw-u-md-3-4,
    .cw-u-md-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .cw-u-md-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .cw-u-md-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .cw-u-md-5-6,
    .cw-u-md-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .cw-u-md-7-8,
    .cw-u-md-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .cw-u-md-11-12,
    .cw-u-md-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .cw-u-md-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .cw-u-md-1,
    .cw-u-md-1-1,
    .cw-u-md-5-5,
    .cw-u-md-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 64em) {
    .cw-u-lg-1,
    .cw-u-lg-1-1,
    .cw-u-lg-1-2,
    .cw-u-lg-1-3,
    .cw-u-lg-2-3,
    .cw-u-lg-1-4,
    .cw-u-lg-3-4,
    .cw-u-lg-1-5,
    .cw-u-lg-2-5,
    .cw-u-lg-3-5,
    .cw-u-lg-4-5,
    .cw-u-lg-5-5,
    .cw-u-lg-1-6,
    .cw-u-lg-5-6,
    .cw-u-lg-1-8,
    .cw-u-lg-3-8,
    .cw-u-lg-5-8,
    .cw-u-lg-7-8,
    .cw-u-lg-1-12,
    .cw-u-lg-5-12,
    .cw-u-lg-7-12,
    .cw-u-lg-11-12,
    .cw-u-lg-1-24,
    .cw-u-lg-2-24,
    .cw-u-lg-3-24,
    .cw-u-lg-4-24,
    .cw-u-lg-5-24,
    .cw-u-lg-6-24,
    .cw-u-lg-7-24,
    .cw-u-lg-8-24,
    .cw-u-lg-9-24,
    .cw-u-lg-10-24,
    .cw-u-lg-11-24,
    .cw-u-lg-12-24,
    .cw-u-lg-13-24,
    .cw-u-lg-14-24,
    .cw-u-lg-15-24,
    .cw-u-lg-16-24,
    .cw-u-lg-17-24,
    .cw-u-lg-18-24,
    .cw-u-lg-19-24,
    .cw-u-lg-20-24,
    .cw-u-lg-21-24,
    .cw-u-lg-22-24,
    .cw-u-lg-23-24,
    .cw-u-lg-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .cw-u-lg-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .cw-u-lg-1-12,
    .cw-u-lg-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .cw-u-lg-1-8,
    .cw-u-lg-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .cw-u-lg-1-6,
    .cw-u-lg-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .cw-u-lg-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .cw-u-lg-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .cw-u-lg-1-4,
    .cw-u-lg-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .cw-u-lg-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .cw-u-lg-1-3,
    .cw-u-lg-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .cw-u-lg-3-8,
    .cw-u-lg-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .cw-u-lg-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .cw-u-lg-5-12,
    .cw-u-lg-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .cw-u-lg-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .cw-u-lg-1-2,
    .cw-u-lg-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .cw-u-lg-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .cw-u-lg-7-12,
    .cw-u-lg-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .cw-u-lg-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .cw-u-lg-5-8,
    .cw-u-lg-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .cw-u-lg-2-3,
    .cw-u-lg-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .cw-u-lg-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .cw-u-lg-3-4,
    .cw-u-lg-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .cw-u-lg-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .cw-u-lg-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .cw-u-lg-5-6,
    .cw-u-lg-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .cw-u-lg-7-8,
    .cw-u-lg-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .cw-u-lg-11-12,
    .cw-u-lg-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .cw-u-lg-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .cw-u-lg-1,
    .cw-u-lg-1-1,
    .cw-u-lg-5-5,
    .cw-u-lg-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 80em) {
    .cw-u-xl-1,
    .cw-u-xl-1-1,
    .cw-u-xl-1-2,
    .cw-u-xl-1-3,
    .cw-u-xl-2-3,
    .cw-u-xl-1-4,
    .cw-u-xl-3-4,
    .cw-u-xl-1-5,
    .cw-u-xl-2-5,
    .cw-u-xl-3-5,
    .cw-u-xl-4-5,
    .cw-u-xl-5-5,
    .cw-u-xl-1-6,
    .cw-u-xl-5-6,
    .cw-u-xl-1-8,
    .cw-u-xl-3-8,
    .cw-u-xl-5-8,
    .cw-u-xl-7-8,
    .cw-u-xl-1-12,
    .cw-u-xl-5-12,
    .cw-u-xl-7-12,
    .cw-u-xl-11-12,
    .cw-u-xl-1-24,
    .cw-u-xl-2-24,
    .cw-u-xl-3-24,
    .cw-u-xl-4-24,
    .cw-u-xl-5-24,
    .cw-u-xl-6-24,
    .cw-u-xl-7-24,
    .cw-u-xl-8-24,
    .cw-u-xl-9-24,
    .cw-u-xl-10-24,
    .cw-u-xl-11-24,
    .cw-u-xl-12-24,
    .cw-u-xl-13-24,
    .cw-u-xl-14-24,
    .cw-u-xl-15-24,
    .cw-u-xl-16-24,
    .cw-u-xl-17-24,
    .cw-u-xl-18-24,
    .cw-u-xl-19-24,
    .cw-u-xl-20-24,
    .cw-u-xl-21-24,
    .cw-u-xl-22-24,
    .cw-u-xl-23-24,
    .cw-u-xl-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .cw-u-xl-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .cw-u-xl-1-12,
    .cw-u-xl-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .cw-u-xl-1-8,
    .cw-u-xl-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .cw-u-xl-1-6,
    .cw-u-xl-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .cw-u-xl-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .cw-u-xl-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .cw-u-xl-1-4,
    .cw-u-xl-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .cw-u-xl-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .cw-u-xl-1-3,
    .cw-u-xl-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .cw-u-xl-3-8,
    .cw-u-xl-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .cw-u-xl-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .cw-u-xl-5-12,
    .cw-u-xl-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .cw-u-xl-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .cw-u-xl-1-2,
    .cw-u-xl-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .cw-u-xl-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .cw-u-xl-7-12,
    .cw-u-xl-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .cw-u-xl-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .cw-u-xl-5-8,
    .cw-u-xl-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .cw-u-xl-2-3,
    .cw-u-xl-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .cw-u-xl-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .cw-u-xl-3-4,
    .cw-u-xl-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .cw-u-xl-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .cw-u-xl-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .cw-u-xl-5-6,
    .cw-u-xl-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .cw-u-xl-7-8,
    .cw-u-xl-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .cw-u-xl-11-12,
    .cw-u-xl-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .cw-u-xl-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .cw-u-xl-1,
    .cw-u-xl-1-1,
    .cw-u-xl-5-5,
    .cw-u-xl-24-24 {
        width: 100%;
    }
}

Grid Blocking

These styles allow us to demonstrate grid widths, and may be useful elsewhere. You may not need them.

.cw-g-unit {
    margin: 0.25em 0;
    padding-left: 4.5em;
}

.cw-g-unit-details {
    position: relative;
    background: #fafafa;
}
.cw-g-unit-bar {
    height: 2em;
    background: #eee;
}
.cw-g-unit .cw-g-unit-width {
  font-family: Consolas, 'Liberation Mono', Courier, monospace;
}