A page without a grid is a usability nightmare. Grid systems bring visual structure and balance to your website, so if you know how to use it, you can greatly increase the overall user experience because you’ll create predictable patterns for users to follow. For those who don’t know, the grid helps you create effective  site layouts and assist in communicating site’s main messages clearly to the end user. A grid is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but its innate propensity for creating order out of chaos makes it one of the most powerful tools at a designer’s disposal. Below you have 10 online resources for creating grid based webdesigns.

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.

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Tiny Fluid Grid

Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.

The 1KB CSS Grid

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Modular Grid Pattern

Modular Grid Pattern — is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other.

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

3×4 Grid Builder

The 3 × 4 grid poster illustrates a change in design practice. Computation-based design—that is, the use of algorithms to compute options—is becoming more practical and more common. Design tools are becoming more computation-based; designers are working more closely with programmers; and designers are taking up programming.

Grid­lover

Gridlover keeps sizing type tidy and logical. Font sizes are calculated by stepping up the font size by the scale factor.

Gridpak

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.