Grids CSS: Examples

The foundational YUI Grids CSS makes it easy to create page layouts with wireframes completely driven by CSS. Grids has three components that you can use individually or in any combination. The first part lets you set the overall page width. The second part, Preset Templates, lets you define the primary and secondary block of content (without regard to source order) and choose one of several common fixed widths for the secondary block. The third part, Nesting Grids, provides the ability to nest subdivided regions of one to four columns within any part of the page. The examples below highlight each of these capabilities.

• Page Width = 750px: Use Grids' preset page width of 750px.
• Page Width = 950px: Use Grids' preset page width of 950px.
• Page Width = 974px: Use Grids' preset page width of 974px.
• Page Width = 100%: Use Grids' preset page width of 100%.
• Custom Page Width: Specify an arbitrary page width.
• Preset Template 1, 160px left: Use Grids' preset templates to put a 160px narrow column on the left side.
• Preset Template 2, 180px left: Use Grids' preset templates to put a 180px narrow column on the left side.
• Preset Template 3, 300px left: Use Grids' preset templates to put a 300px narrow column on the left side.
• Preset Template 4, 180px right: Use Grids' preset templates to put a 180px narrow column on the right side.
• Preset Template 5, 240px right: Use Grids' preset templates to put a 240px narrow column on the right side.
• Preset Template 6, 300px right: Use Grids' preset templates to put a 300px narrow column on the right side.
• Standard Nesting Grid (1/2 - 1/2): The buiding block of nested grids is the Standard Nesting Grid which creates two evenly-wide child columns. Learn how in this example.
• Special Nesting Grid "B" (1/3, 1/3, 1/3): When you need an odd number of columns, or unevenly divided space, use Special Nesting Grids instead of Standard Nesting Grids.
• Special Nesting Grid "C" (2/3, 1/3): Create two uneven columns with this Special Nesting Grid.
• Special Nesting Grid "D" (1/3, 2/3): Create two uneven columns with this Special Nesting Grid.
• Special Nesting Grid "E" (3/4, 1/4): Create two uneven columns with this Special Nesting Grid.
• Special Nesting Grid "F" (1/4, 3/4): Create two uneven columns with this Special Nesting Grid.
• Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4): Create more than 2 (or 3) columns by nesting grids. This example shows a four-column even-width layout achieved by nesting Standard Nesting Grids inside of Standard Nesting Grids.
• Using ARIA Landmark Roles With Grids: The ARIA Landmark Roles improve the accessibility of layouts created using Grids by allowing developers to more accurately communicate to users of screen readers the intended purpose of each section of a document or application.

Other YUI Examples That Make Use of the Grids CSS

• Split Pane resizing with Grids CSS (included with examples for the Resize Utility)
• Using a Layout with Grids CSS (included with examples for the Layout Manager)
• Website Left Nav With Submenus Built From Markup (included with examples for the Menu Family)
• Website Left Nav With Submenus From JavaScript (included with examples for the Menu Family)
• Website Top Nav With Submenus Built From Markup (included with examples for the Menu Family)
• Website Top Nav With Submenus From JavaScript (included with examples for the Menu Family)
• Website Left Nav Using Animation With Submenus Built From Markup (included with examples for the Menu Family)
• Website Left Nav Using Animation With Submenus From JavaScript (included with examples for the Menu Family)
• Website Top Nav Using Animation With Submenus Built From Markup (included with examples for the Menu Family)
• Website Top Nav Using Animation With Submenus From JavaScript (included with examples for the Menu Family)