Grid Generator
This grid generator is provided by Yahoo! YUI 2. With this tool you can create your grid and change it as you like with a few simple mouse-clicks. When you are happy with the grid you can just save the HTML and CSS code and you are good to go.
Features of the Grid Generator are:
- Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
- Supports easy customization of the width for fixed-width layouts.
- Flexible in response to user initiated font-size adjustments.
- Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
- Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
- Layouts less than 100% are automatically centered.
- Accommodates IAB's Ad Unit Guidelines for common ad dimensions.
- Offers full A-grade browser support.
How to Use?
The grid generator is a visual tool to help you in creating a grid layout for your website.
- To begin, click on the 'Create Grid' for the generator to load all options.
- On the following page, you will be able to set options such as: Body Size, Body Columns and Rows.
- With each option you change, you will be able to see how the grid will look.
- When you are happy with the grid layout, click on 'Show Code' to copy the newly generated code to the clipboard.