Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Grids CSS: Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4)

# Grids CSS: Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4)

This example shows how to use nested Standard Nesting Grids to create four evenly-sized columns.

View example in new window.

## Subdividing Regions with Nesting Grids and Special Nesting Grids

YUI Grids CSS 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 two Standard Nesting Grids nested within a parent Standard Nesting Grid

This is an important example. First of all, note that all Nesting Grids can be nested within other Nesting Grids. If a Standard Nesting Grid (`div.yui-g`) creates two children, each of those children can be another Nesting Grid. Making each child of a Standard Grid another Standard Grid, we can easily create a four-column layout.

The second thing to note is that while Nesting Grids usually contain Units, they can also directly contain other Nesting Grids. Remember that the "first" node position still needs to me specified via a class value whether it's a grid or a unit.

The final thing to keep in mind in this example is that while we're showing a Standard inside a Standard, you can mix and match Special Nesting Grids in the same way.

<body> <div class="yui-g"> <div class="yui-g first"> <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> <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> </div> </body>

The above markup will create two units within each of two units. The result is four columns of even width.

## 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`) nested within another Standard Nesting Grid.

### Grids CSS Examples:

- Page Width = 750px
- Page Width = 950px
- Page Width = 974px
- Page Width = 100%
- Custom Page Width
- Preset Template 1, 160px left
- Preset Template 2, 180px left
- Preset Template 3, 300px left
- Preset Template 4, 180px right
- Split Pane resizing with Grids CSS (included with examples for Resize Utility (beta))
- Using a Layout with Grids CSS (included with examples for Layout Manager (beta))
- Preset Template 5, 240px right
- Preset Template 6, 300px right
- Standard Nesting Grid (1/2 - 1/2)
- Special Nesting Grid "B" (1/3, 1/3, 1/3)
- Special Nesting Grid "C" (2/3, 1/3)
- Special Nesting Grid "D" (1/3, 2/3)
- Special Nesting Grid "E" (3/4, 1/4)
- Special Nesting Grid "F" (1/4, 3/4)
- Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4)
- Website Left Nav With Submenus Built From Markup (included with examples for Menu Family)
- Website Left Nav With Submenus From JavaScript (included with examples for Menu Family)
- Website Top Nav With Submenus Built From Markup (included with examples for Menu Family)
- Website Top Nav With Submenus From JavaScript (included with examples for Menu Family)
- Website Left Nav Using Animation With Submenus Built From Markup (included with examples for Menu Family)
- Website Left Nav Using Animation With Submenus From JavaScript (included with examples for Menu Family)
- Website Top Nav Using Animation With Submenus Built From Markup (included with examples for Menu Family)
- Website Top Nav Using Animation With Submenus From JavaScript (included with examples for Menu Family)

### More Grids CSS Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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