YUI CSS Grids [deprecated]

CSS Grids [deprecated]

Getting Started

We use and recommend the 4.01 Strict !DOCTYPE to trigger Standards Mode in browsers that have multiple rendering modes:

Include Dependencies

To use CSS Grids [deprecated], include the following source file in your web page with the link element.

Grids rely on the width of an "em" provided by CSS Fonts; therefore, that file must be included. For the sake of this document, the level playing field provided by CSS Reset is also assumed. Including the doctype declaration and links to the files, the top and head of your document should contain the following information:

Using YUI CSS Grids

This sections describes how to implement CSS Grids. It contains these sub-sections:

Page Widths
Template Presets
Nesting Grids
Special Nesting Grids

Choose the Overall Page Width

Define the overall page width by setting a class on the containing node. You can choose from a 100% layout and six fixed-width or relative-width pages at 750, 950, or 974 pixels.

Class	Description
`.yui-d0`	100%. Centered. 10px left/right margin.
`.yui-d1`	750px. Centered. Fluid.
`.yui-d1f`	750px. Centered. Fixed.
`.yui-d2`	950px. Centered. Fluid.
`.yui-d2f`	950px. Centered. Fixed.
`.yui-d3`	974px. Centered. Fluid.
`.yui-d3f`	974px. Centered. Fixed.

The Code

Here is what your page may look like after you've picked your page width:

Fixed vs Relative

YUI Grids generally declares widths in relative units (that change size based on the users' font-size or zoom factor). For fixed page widths append an f to the class name. For example, for a fixed-width 750px page, use div.yui-d1f instead of div.yui-d1.

Example: Page Width

This example illustrates the included page widths.

Note on 100% Layout

On the advice of our designers, the 100% grid (.yui-d0) has 10px of margin on the left and right sides. This prevents the content from bleeding into the browser's chrome. If you prefer, you can set it back to zero by adding this to your document:

Customizing the Page Width

We've made it easy to customize the page width. pixels/13 = ems for all non-IE browsers. For IE, pixels/13.3333 = ems. (I find it useful to preserve up to four decimal places (1.2345) before rounding.)

In a style block, declare the non-IE number first, then declare the IE number using the *-property filter. The following code creates a 600 pixel layout that responds to zooming and font-size adjustments:

Custom Fixed Width

If you'd like a fixed-width layout, use pixels directly:

Note on Customizing Page Widths

Here are some other things to keep in mind.

The width is set in ems because ems scale with user-initiated font-size adjustment.
YUI Fonts does a good job of normalizing the width of an em, but we're still obliged to provide a slightly different value for IE.
Be sure the width value for IE comes after the value for everybody else.
Setting the min-width is optional, but helps the grid maintain integrity as the viewport shrinks.
The text-align and margin are used to help center the page, and should generally not be modified.

Example: Custom Page Width

This example illustrates the included page widths.

Using Template Presets

Most web pages have a main block of content and a secondary block of content. Should the narrow block be on the left or the right? How wide should it be?

Templates Presets in CSS Grids allow you to choose the positioning of these blocks (narrow on the left or the right?) as well as the fixed width of the secondary (narrow) block. The main block will take the remaining available space, which varies depending on the overall page width.

The two blocks on the page are both defined as div.yui-b, where "b" stands for block. Wrap the block considered "main" in another div, div.yui-main. It will look like this:

Available Template Presets

With YUI Grids you choose your Template Preset by setting a class on an ancestor node of div.yui-main. The six choices are in the table below, and here's an example showing the six template presets stacked on top of each other.

Class	Description
`.yui-t1`	160 on left
`.yui-t2`	180 on left
`.yui-t3`	300 on left
`.yui-t4`	180 on right
`.yui-t5`	240 on right
`.yui-t6`	300 on right

Here's what the code looks like to choose a template preset, in this case "yui-t4" which puts a 180 pixel column on the right side:

Source-Order Independence

In some cases you may want your secondary content block to appear before your main content block in your markup. For example, some sites put their navigation in the secondary block yet want it to appear first in the markup for accessibility or search engine optimization (SEO) reasons. YUI's CSS Grids offers source-order independence at the yui-b level without impacting the visual layout of your page. In other words, the "b" wrapped in "main" can come before or after the naked "b" without impacting your visual layout.

The following two code blocks render visually identically even though the source code is ordered differently:

Using Nesting Grids

YUI CSS Grids provides a system for subdividing sections of your page with nestable grids. Use this technique to easily create complex layouts that go beyond the two column layouts offered by the template presets above. In this example, the seven most-used Nesting Grid structures are stacked on the same page.

The Basic Idea

The basic idea is that "grids" are holders of "units". The containing parent node tells its children how to divide space.

The standard grid holder is a div with a class of "yui-g." The contained units are divs with a "yui-u" class (u is for unit). Except in special cases we'll examine later, a grid holds two units and instructs each unit to take up half the available space. Here's what a basic nested two-unit grid looks like:

Note: Indicating `:first-child`

Because not all A-grade browser support the :first-child pseudo-class selector, we manually indicate which node is "first" by adding an additional value to the class attribute. This is useful information to have because, for example, we sometimes float siblings apart.

Using Special Nesting Grids

The grid-unit pattern divides space into two even units. To create layouts of more than two units, and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While "yui-g" tells the two children each take up half the space each, "yui-gc" tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space.

Available Special Nesting Grids

Class	Description
`.yui-gb`	1/3 - 1/3 - 1/3
`.yui-gc`	2/3 - 1/3
`.yui-gd`	1/3 - 2/3
`.yui-ge`	3/4 - 1/4
`.yui-gf`	1/4 - 3/4

Putting It All Together

The three aspects of CSS Grids -- Page Widths, Template Presets, and Nesting Grids -- provide a massive number of complex page layouts with ease. No matter how you put the pieces together, you just need the unmodified YUI CSS Grids file - it's all in the single file! Give it a shot, check out all the examples, and enjoy.

Support & Community

Forums & Blog

YUI 3 discussion forums are hosted on YUILibrary.com.

In addition, please visit the YUIBlog for updates and articles about the YUI Library written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are located on the YUILibrary.com site. Before filing new feature requests or bug reports, please review our reporting guidelines.