Desktops. Laptops. Tablets. Smartphones. There are now numerous ways in which a website can be viewed. With the rapid rise in popularity of smartphones more and more attention must be given to designing a website so that it actually looks like it was designed to be viewed on a smartphone, while at the same time designing a website so that it looks like it was designed to be viewed on a desktop, laptop, etc . But how do we compensate for the vast amount of screens which websites can be viewed on. These CSS Grid Layout Frameworks may offer the right solution.

Bootstrap, from Twitter

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

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.

The Semantic Grid System

The Semantic Grid System is a fresh approach to CSS grids which allows us to define column-gutter widths, choose the number of columns and switch between pixels and percentages. And all these without the -kinda ugly- .grid_x classes used in the markup.

There is also a detailed introduction of Semantic.gs in Smashing Magazine that is written by the developer himself.

The 1140px CSS Grid System

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Columnal

A responsive CSS grid system helping desktop and mobile browsers play nicely together.

978 Grid System for Web Design

978 is a grid layout system that uses 12 columns at 54px, with 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.