7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<div class="intro">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <p>Creating a layout using grids requires a <code>yui3-g</code> container

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang and any number of <code>yui3-u-*</code> units.

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang To create a layout that splits the available width into 2 equal parts,

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang use <code>yui3-u-1-2</code> units. The last two numbers "1-2" represents

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang 1/2</p>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang</div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<div class="example newwindow">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <a href="cssgrids-units-example.html" target="_blank" class="button">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang View Example in New Window

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang </a>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang</div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<h4>Note</h4>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<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>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<h3>Basic Markup Structure</h3>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang```

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<div class="yui3-g">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <div class="yui3-u-1-2"></div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <div class="yui3-u-1-2"></div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang</div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang```

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<h3>Provide a Content Container</h3>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<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>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang```

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<div class="yui3-g">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <div class="yui3-u-1-2">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <div class="content">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang </div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang </div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <div class="yui3-u-1-2">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <div class="content">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang </div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang </div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang</div>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang```

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<h3>Adding a Gutter</h3>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<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>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang```

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<style>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang.yui3-g .content {

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang border: 2px solid #000;

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang margin-right:10px; /* "column" gutters */

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang padding: 1em;

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang}

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang</style>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang```

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<h3>Available Units</h3>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang<table class="auto">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <thead>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <tr class="odd">

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <th>Class</th>

7ff836697c120cb94bd30d5c2204eb9b74718e4cZhong Wang <th>Description</th>

</tr>

</thead>

<tbody>

<tr>

<td><code>.yui3-u</code></td>

<td>shrinks to fit content (unless given an explicit size)</td>

</tr>

<tr class="odd">

<td><code>.yui3-u-1</code></td>

<td>fills entire width of container</td>

</tr>

<tr>

<td><code>.yui3-u-1-2</code></td>

<td>fills 1/2 the container</td>

</tr>

<tr class="odd">

<td><code>.yui3-u-1-3</code></td>

<td>fills 1/3 the container</td>

</tr>

<tr>

<td><code>.yui3-u-2-3</code></td>

<td>fills 2/3 the container</td>

</tr>

<tr class="odd">

<td><code>.yui3-u-1-4</code></td>

<td>fills 1/4 the container</td>

</tr>

<tr>

<td><code>.yui3-u-3-4</code></td>

<td>fills 3/4 the container</td>

</tr>

<tr class="odd">

<td><code>.yui3-u-1-5</code></td>

<td>fills 1/5 the container</td>

</tr>

<tr>

<td><code>.yui3-u-2-5</code></td>

<td>fills 2/5 the container</td>

</tr>

<tr class="odd">

<td><code>.yui3-u-3-5</code></td>

<td>fills 3/5 the container</td>

</tr>

<tr>

<td><code>.yui3-u-4-5</code></td>

<td>fills 4/5 the container</td>

</tr>

<tr class="odd">

<td><code>.yui3-u-1-6</code></td>

<td>fills 1/6 the container</td>

</tr>

<tr>

<td><code>.yui3-u-5-6</code></td>

<td>fills 5/6 the container</td>

</tr>

</tbody>

</table>