YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Grids CSS: Standard Nesting Grid (1/2 - 1/2)

# Grids CSS: Standard Nesting Grid (1/2 - 1/2)

This example shows how to use a standard Nesting Grid to create two evenly-sized columns.

View example in new window.

## Subdividing Regions with Nesting Grids and Special Nesting Grids

YUI Grids CSS offers three ways to control your page layout. Perhaps the most interesting and powerful aspect of YUI Grids is the ability to subdivide regions of the page into two or three columns of even (50%-50% or 33%-33%-33%) or uneven size (66%-33%, 25%-75%, etc).

Nested subdivisions of spaces are created by the interplay of "grids" and "units". The "grids" are a parent container that tells its children how to behave. The Standard Nesting Grid's parent container is `div.yui-g`, where "g" stands for "grid" or "grid holder." Within this holder are two units that take direction from their parent. They look like this: `div.yui-u`, where "u" stands for units. The units are indentical except that we need to add a class to distinguish the first one from any others.

## Here is the markup for a Standard Nesting Grid

<body> <div class="yui-g"> <div class="yui-u first"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> </div> <div class="yui-u"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> </div> </div> </body>

The above markup will create two units that each take up 50% of the available space offered by their parent (minus a gutter between them).

## Available Nesting Grids

We refer to these Nesting Grids as either Standard (meaning their two children split space evenly) or Special (meaning they share space unevenly, for example 66% and 33%, or that there are three children instead of two, for example 33%, 33%, 33%).

- `div.yui-g` - Standard Nesting Grid - tells two children to each take up half the available space.
- `div.yui-gb` - Special Nesting Grid B - tells three children to each take up a third of the available space.
- `div.yui-gc` - Special Nesting Grid C - tells the first of two children to take up 66% of the available space.
- `div.yui-gd` - Special Nesting Grid D - tells the first of two children to take up 33% of the available space.
- `div.yui-ge` - Special Nesting Grid E - tells the first of two children to take up 75% of the available space.
- `div.yui-gf` - Special Nesting Grid F - tells the first of two children to take up 25% of the available space.

This example showcases the Standard Nesting Grid (`div.yui-g`).

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### Grids CSS Examples:

### More Grids CSS Resources:

- User's Guide (external)
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings