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 classes vs. unit classes
Pure Grids consist of two types of classes: grid classes (pure-g or pure-g-r) and unit classes (pure-u or pure-u-*)
The widths of the units are fractions
Units have various class names that represent their widths. For example, pure-u-1-2 has a width of 50%, whereas pure-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 pure-g classname must be a grid unit with a pure-u or pure-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.

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

<body>
    <div class="pure-g">
        <div class="pure-u-1-3">
            <!--
            By default, grid units don't have any margin/padding.
            If you want to add these, put them in a child container.
            -->
            <p>Thirds</p>
        </div>

        <div class="pure-u-1-3">
            <p>Thirds</p>
        </div>

        <div class="pure-u-1-3">
            <p>Thirds</p>
        </div>
    </div>
</body>

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 pure-u-* classname where * is one of the unit factions listed below. For example the unit classname for 50% width is: pure-u-1-2.

5ths-Based Units

1-5
2-5
3-5
4-5
1
1-1
5-5

24ths-Based Units

1-24
1-12
2-24
3-24
1-8
4-24
1-6
5-24
1-4
6-24
7-24
1-3
8-24
3-8
9-24
5-12
10-24
11-24
1-2
12-24
13-24
7-12
14-24
5-8
15-24
2-3
16-24
17-24
3-4
18-24
19-24
5-6
20-24
7-8
21-24
11-12
22-24
23-24
1
1-1
24-24

Custom Unit Sizes

We are working on building tools to allow people to customize Pure Grids. The first low-level tools, the Pure Grids Rework Plugin, is available to use today—we use this tool to generate Pure's built-in unit sizes.

Pure Responsive Grids

Pure Responsive Grids builds on top of the base Grids. It adds a single new classname called pure-g-r (the "r" stands for responsive, you see). You can use this instead of using pure-g as you normally do. All elements with a classname of pure-u-*-* will automatically become responsive and collapse to width: 100%; when the viewport's width is 767px or lower.

Regular Grid vs. Responsive Grid

The first snippet below shows how regular Pure Grids are written. These grids are unresponsive. They'll always be one-thirds, irrespective of the width of the screen. The second snippet replaces the pure-g with pure-g-r, thereby making the one-third columns collapse to width: 100%; on lower screen widths (767px by default).

<div class="pure-g">

    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>

</div>
<div class="pure-g-r">

    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>

</div>

Responsive Grid: An Example

Resize the page to see the grid collapse.

Fast

YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.

Complete

YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.

Industrial Strength

A thriving community, a carefully architected infrastructure, and a comprehensive suite of tools help you code like a pro, from simple web pages to complex web applications.

Free and Open

YUI is free for all uses and is developed in the open on GitHub. Core team members can always be found in the forums and the #yui IRC channel on Freenode. Pull requests welcome!

Sample image of a meeting for a responsive image example.

Two-Fifth Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.

Three-Fifth Column

Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.

Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.

Grids on Mobile

Putting the pure-g classname on the wrapper instead of pure-g-r will ensure that grid units will not collapse on small screens. This is a good way to make grids on smaller screens like phones.

Thirds

This cell will be a grid even on mobile devices.

Thirds

This cell will be a grid even on mobile devices.

Thirds

This cell will be a grid even on mobile devices.

Grid Helper Classes

Pure's Responsive Grids also comes with the following helper classes to show or hide content at different screen widths.

Helper Class Name Description
pure-hidden-phone Content marked with this class will be hidden below 768px
pure-hidden-tablet Content marked with this class will be hidden between 768px and 979px
pure-hidden-desktop Content marked with this class will be hidden above 980px

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:

<style>
    .l-box {
        padding: 1em;
    }
</style>

...

<div class="pure-g">

    <div class="pure-u-1-2">
        <div class="l-box"> ... </div>
    </div>

    <div class="pure-u-1-2">
        <div class="l-box"> ... </div>
    </div>

</div>

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:

<style>
    .pure-g > div {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .l-box {
        padding: 1em;
    }
</style>

...

<div class="pure-g">

    <div class="pure-u-1-2 l-box"> ... </div>
    <div class="pure-u-1-2 l-box"> ... </div>

</div>

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.

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:

<style>
/*
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.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: Georgia, Times, "Times New Roman", serif;
}
</style>

Want to just use Grids?

Grids is part of the Pure CSS file. However, if you just want Grids and not the other modules, you can pull it down separately. Just include this <link> element in your <head>.

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/grids-min.css">