d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="intro">
f53c8927602630269ff996397a763b7e5084d242Jeff Conniff <p>Creating a layout using grids requires a <code>yui3-g</code> container
f53c8927602630269ff996397a763b7e5084d242Jeff Conniff and any number of <code>yui3-u-*</code> units.
f53c8927602630269ff996397a763b7e5084d242Jeff Conniff To create a layout that splits the available width into 2 equal parts,
ec4046befed6c6618dc764c062b79f71537fa98bJeff Conniff use two <code>yui3-u-1-2</code> units. The last two numbers of the class name, "1-2", represent
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="example newwindow">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="cssgrids-units-example.html" target="_blank" class="button">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney View Example in New Window
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h4>Note</h4>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>The only child elements (e.g. direct descendants) of a <code>yui3-g</code> should be <code>yui-3-u-*</code> elements. Any elements within a <code>yui3-g</code> need to be wrapped in a <code>yui3-u-*</code> of some kind, otherwise you may experience side-effects due to the layout system being used.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Basic Markup Structure</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="yui3-g">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2"></div>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2"></div>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Provide a Content Container</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Styling should be applied to a container within the unit, rather than the unit itself. This allows you to set borders, padding, margins (gutters), etc. without worrying about breaking the layout. For this demo we will give the content a class of <code>content</code>, but can be called whatever you like.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="yui3-g">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="content">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-2">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="content">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Adding a Gutter</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>All units align edge to edge, with zero space in between. You can add space ("gutter"), by simply adding a margin to your content. This is where additional content styling, such as borders, padding, colors, etc. can be applied as well.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.yui3-g .content {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney border: 2px solid #000;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney margin-right:10px; /* "column" gutters */
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney padding: 1em;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Available Units</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<table class="auto">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <th>Class</th>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <th>Description</th>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>shrinks to fit content (unless given an explicit size)</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills entire width of container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-2</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/2 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-3</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/3 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-2-3</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 2/3 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-4</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/4 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-3-4</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 3/4 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-2-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 2/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-3-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 3/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-4-5</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 4/5 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <tr class="odd">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-1-6</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 1/6 the container</td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td><code>.yui3-u-5-6</code></td>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <td>fills 5/6 the container</td>