CSS Grids

Note: The file "grids.css" is deprecated, use "cssgrids.css" instead.

The foundational CSS Grids provides a simple system for laying out content. The basic components are "grids" and "units". A "grid" (yui3-g) contains one or more "units" (yui3-u). The type of "unit" chosen describes how it should be sized (e.g. "yui3-u-1-2" takes up half the grid, "yui3-u-1-3" takes up one-third, et cetera). The only constraints for YUI3 Grids are that all "units" are children of a "grid". All you need to do is define a grid, one or more units inside it, and specify widths for them. Then stack and nest as required.

Getting Started

Include Dependencies

To use CSS Grids, include the following source file in your web page with the link element.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssgrids/grids-min.css">

Using YUI CSS Grids

Unit Sizes

All of the sizing for YUI Grids is done using "units". Units can be subdivided up to 1/24 of the available width. The following table gives the various unit classes that can be applied.

Class	Description
`.yui3-u`	Shrinks to fit unless a width is applied.
`.yui3-u-1`	Fills 100% of the available width.
`.yui3-u-1-2`	Fills 1/2 of available width.
`.yui3-u-1-3`	Fills 1/3 of available width.
`.yui3-u-2-3`	Fills 2/3 of available width.
`.yui3-u-1-4`	Fills 1/4 of available width.
`.yui3-u-3-4`	Fills 3/4 of available width.
`.yui3-u-1-5`	Fills 1/5 of available width.
`.yui3-u-2-5`	Fills 2/5 of available width.
`.yui3-u-3-5`	Fills 3/5 of available width.
`.yui3-u-4-5`	Fills 4/5 of available width.
`.yui3-u-1-6`	Fills 1/6 of available width.
`.yui3-u-5-6`	Fills 5/6 of available width.
`.yui3-u-1-8`	Fills 1/8 of available width.
`.yui3-u-3-8`	Fills 3/8 of available width.
`.yui3-u-5-8`	Fills 5/8 of available width.
`.yui3-u-7-8`	Fills 7/8 of available width.
`.yui3-u-1-12`	Fills 1/12 of available width.
`.yui3-u-5-12`	Fills 5/12 of available width.
`.yui3-u-7-12`	Fills 7/12 of available width.
`.yui3-u-11-12`	Fills 11/12 of available width.
`.yui3-u-1-24`	Fills 1/24 of available width.
`.yui3-u-5-24`	Fills 5/24 of available width.
`.yui3-u-7-24`	Fills 7/24 of available width.
`.yui3-u-11-24`	Fills 11/24 of available width.
`.yui3-u-13-24`	Fills 13/24 of available width.
`.yui3-u-17-24`	Fills 17/24 of available width.
`.yui3-u-19-24`	Fills 19/24 of available width.
`.yui3-u-23-24`	Fills 23/24 of available width.

Building a Page Template

The sizing of "units" is done using percentages, so in order to build a "page" template, a width on the outermost container is required. The simplest approach to fixing your page size is to apply a width directly to the body element. Optionally, the page can be centered in the viewport by setting the margin to auto. The following creates a 960px, centered layout.

body {
    margin: auto; /* center in viewport */
    width: 960px;
}

The next step is to decide on the size of each "column" and choose the appropriate "unit". Remember, units sizes are percentage-based, so a bit of math may be required when designing with pixels rather than proportions. To create a 200 pixel wide sidebar, assuming a 960px layout, we would use a 5/24 unit ("yui3-u-5-24") for the narrow column, and a 19/24 ("yui3-19-24") for the main column.

<head>
    <style>
    body {
        margin: auto; /* center in viewport */
        width: 960px;
    }

    </style>
</head>

<body>
    <div class="yui3-g">
        <div class="yui3-u-5-24">

        </div>
        <div class="yui3-u-19-24">

        </div>
    </div>
</body>

Pixel Units

Some layouts have precise sizing requirements that may not always be fulfilled by percentage-based units. Custom unit sizes may be applied using the generic unit ("yui3-u"). Rather than overriding the YUI units, custom sizing should be done using your own semantic markup. To recreate the previous example with custom units, we will add IDs to the column containers. This examples uses "nav" and "main", but these should be tailored to your content.

<head>
    <style>
    body {
        margin: auto; /* center in viewport */
        width: 960px;
    }

    #nav {
        width: 200px;
    }

    #main {
        width: 760px;
    }

    </style>
</head>

<body>
    <div class="yui3-g">
        <div class="yui3-u" id="nav">

        </div>
        <div class="yui3-u" id="main">

        </div>
    </div>
</body>