d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="intro">
e4af7be013110f3f5aa4d29aaa1d21dfe58466d2Matt Sweeney<strong>Note:</strong> The file "grids.css" is deprecated, use "cssgrids.css" instead.
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>The foundational CSS Grids provides a simple system for layout out content. The basic components are "grids" and "units". A "grid" (<code>yui3-g</code>) contains one or more "units" (<code>yui3-u</code>). 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 constrains 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.</p>
606cef75efce2decc5cae081b4cc37f8c04ef171Matt Sweeney <h2 id="start">Getting Started</h2>
606cef75efce2decc5cae081b4cc37f8c04ef171Matt Sweeney <h3 id="dependencies">Include Dependencies</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>To use CSS Grids, include the following source file in your web page with the link element.</p>
606cef75efce2decc5cae081b4cc37f8c04ef171Matt Sweeney<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssgrids/grids-min.css">
606cef75efce2decc5cae081b4cc37f8c04ef171Matt Sweeney <h2 id="using">Using YUI CSS Grids</h2>
606cef75efce2decc5cae081b4cc37f8c04ef171Matt Sweeney <h3>Unit Sizes</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>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.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <table class="auto">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <th>Class</th>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <th>Description</th>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Shrinks to fit unless a width is applied.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 100% of the available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-2</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/2 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-3</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/3 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-2-3</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 2/3 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-4</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/4 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-3-4</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 3/4 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/5 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-2-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 2/5 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-3-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 3/5 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-4-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 4/5 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-6</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/6 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-5-6</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 5/6 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-8</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/8 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-3-8</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 3/8 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-5-8</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 5/8 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-7-8</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 7/8 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-12</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/12 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-5-12</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 5/12 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-7-12</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 7/12 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-11-12</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 11/12 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 1/24 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-5-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 5/24 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-7-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 7/24 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-11-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 11/24 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-13-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 13/24 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-17-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 17/24 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-19-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 19/24 of available width.</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-23-24</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>Fills 23/24 of available width.</td>
606cef75efce2decc5cae081b4cc37f8c04ef171Matt Sweeney <h3 id="page_width">Building a Page Template</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>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 <code>margin</code> to <code>auto</code>. The following creates a 960px, centered layout.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin: auto; /* center in viewport */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney width: 960px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>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.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin: auto; /* center in viewport */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney width: 960px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-g">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-5-24">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-19-24">
606cef75efce2decc5cae081b4cc37f8c04ef171Matt Sweeney <h3 id="pixels">Pixel Units</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>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.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin: auto; /* center in viewport */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney width: 960px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney width: 200px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney width: 760px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-g">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u" id="nav">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u" id="main">