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.


If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!
☕ Buy a Coffee

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.

Grid Generator

Create Grid

How to Use?

The grid generator is a visual tool to help you in creating a grid layout for your website.

  1. To begin, click on the 'Create Grid' for the generator to load all options.
  2. On the following page, you will be able to set options such as: Body Size, Body Columns and Rows.
  3. With each option you change, you will be able to see how the grid will look.
  4. When you are happy with the grid layout, click on 'Show Code' to copy the newly generated code to the clipboard.
  • Sponsors
    • Expand Shortened URLs Heer Law - IP Lawyers Unicode Characters and Emojis Advertise Here