May 1, 2010 Off

3 Really Useful CSS Grid Systems

By in Web Design

A Grid based design gives your website consistency and allows flexibility between various elements. Grids make your designs more usable and provides a good correlation between different page elements.

In order to make it easier for you to find out which grid systems suits best for you, following are three useful CSS grid systems.

960 Grid System

The 960 Grid System is designed to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

This grid system is works well for rapid prototyping, as well as when integrated into a production environment. It provides you with two variants: 12 and 16 columns, which can be used separately or in tandem.

The 12-column grid is divided into portions that are 60 pixels wide. And, the 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

You might want to check out a demo of 960 Grid System.

The 1Kb CSS Grid

This is a lightweight CSS grid system which can be used to streamline page templates for content management.

The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between. The HTML is as minimal as the CSS. Each column contains a class indicating its width. Columns are then contained by a row, which serves to clear the floating column

When server-side options for templating and sub-templating are limited, this grid system can be used as an alternative page templating engine. You might want to read more about the 1kb CSS grid system.

YAML CSS Framework

This CSS framework provides you with various utilities for rapid development of modern and accessible CSS layouts. The markup structure and the CSS components of the YAML framework is very flexible.

The basis layout of YAML can be extended with special containers which help set the layout width or can create a border around the layout. You might want to read more about this intriguing CSS framework here.

About: Srikanth AD:
Srikanth is a Web Developer and SEO. Check out his portfolio for more information.

Tags: ,

Comments are closed.