As we know web pages essentially revolve around boxy shapes called rectangles. These rectangles  come together in some way to form a well-formed design. Few years ago, when i started designing web, i learned to design a web in table based layout. But now table based layout has become old fashioned. Cascading Style Sheets (CSS) has been already introduced to improve the capabilities of web presentation.

By using CSS, designers could separate the design elements from the content of a web page and thereby make the pages more efficient, more consistent, more streamlined, and easier to maintain and update. Most of the professional designers are already into CSS design. And when creating design in CSS we have to divide the layout with vertical and/or horizontal guidelines to incorporate margins, spaces and columns in order to provide a framework for organizing content. To overcome that problem Grid was introduced. It helps to design solid visual and structural balance of web-sites or simply we can say grid is a tool to help the designs.

Grids are traditionally found in print work but are very applicable to web design. A grid doesn’t have to make a site look like a newspaper’s layout, but it can certainly aid in creating a uniform structure to start the design with. A good grid can be a strong foundation for any design. Using grids got its start in print design, but has made it’s way over to the web. There are several advantages to using grids in web design, but primarily they help achieve structure and consistency in layouts.

If you have yet to start using grids in your web design projects, but want to get started, i’ve rounded up 10 excellent tools and systems for CSS grid based layouts for web designning beginners. I hope you guys will find it helpful.

1. Grid Designer

A fun tool to help set up a grid.

2. Grid System Generator

Just as the name of the tool says: it helps generate a grid for you. The grid system generator will create custom grid systems in valid css / xhtml for rapid prototyping, development and production environments.

3. Grid Calculator

Another fun tool to help set up grids.

4. 960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

5. 1 KB CSS Grid

The 1 KB CSS Grid is a simple, lightweight approach that doesn’t require a PhD. When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. Its convenient row and column syntax provide all the necessary scaffolding.

6. netProtozo: Grid Generator

Grid Generator allows you to design your own grid by specifying the usual parameters like column width, gutter width, etc. You can then download grab the css or a png of the grid.

7. YUI: CSS Grid Builder

CSS Grid Builder is another tool that lets you design your own grid by specifying body width and number of columns. This one even lets you enter content for the header and footer. Once you’re done you can easily copy the generated code.

8. jQuery Masonry

A jQuery tool that arranges items vertically and horizontally according to a grid.

9. Gridr Buildrrr

Gridr Buildrrr is a useful tool to help you layout your own grids.

10.  Slammer

A grid layout application that overlays any grid anywhere.