We review 10 amazing CSS grid systems

Published: Dec 10, 2009

Rating: 4/5

Though grid layouts may not be new to print design and certainly not design in general, CSS grid systems are still somewhat new to the field of web development. CSS grid systems allow the developer to easily and quickly markup and create structured, grid styled websites and layouts. Each grid systems has its pros and cons, and different ways of accomplishing goals. Today, we'll review 10 amazing CSS grid systems.

1. The 1kb CSS Grid

1kb Grid Screenshot

 

  • Name: 1kb CSS Grid System
  • Features: extremely small file size, simple to use and get started with.
  • File Size (unpacked): 1kb!

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.

Visit the 1kb Grid

2. YUI CSS Grid

YUI Grid Screenshot

 

  • Name: Yahoo! YUI CSS Grid
  • Features: supports fluid and fixed layouts, source order independent.
  • File Size (unpacked): ~8kb

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

Visit YUI CSS Grid

3. 960 Grid System

960 Grid Screenshot

 

  • Name: 960 Grid System
  • Features: 12 or 16 column grid, source order positioning options
  • File Size (unpacked): 5.4kb

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.

Visit the 960 Grid System

4. Blueprint CSS Grid

Blueprint Screenshot

 

  • Name: Blueprint CSS Grid
  • Features: CSS reset, typography package, form and print styles, plugins.
  • File Size (unpacked): dependent on the files included.

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Visit Blueprint CSS Grid

5. YAML Grid System

YAML Grid Screenshot

 

  • Name: YAML (yet another multicolumn layout) Grid
  • Features: xhtml and css grid framework, focus on standards and accessibility, typography, forms, rtl support.
  • File Size (unpacked): dependent on layout and files used.

"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

Visit YAML Grid System

6. CSS Boiler Plate Grid

Boiler CSS Screenshot

 

  • Name: CSS Boiler Plate Grid
  • Features: developed by one of the original blueprint authors, minified and simplified, cuts down on unsemantic markup.
  • File Size (unpacked): ~8kb

As one of the original authors of Blueprint CSS I've decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You're the designer and your craft is important.

Visit CSS Boiler Plate Home

7. Golden Grid CSS

Golden Grid

 

  • Name: Golden Grid CSS System
  • Features: 970px main width, 6/12 grid system, lightweight and small, simple, great documentation.
  • File Size (unpacked): ~1kb (when minified)

The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.

Visit Golden Grid CSS Home

8. Variable Grid System

Variable Grid Screenshot

 

  • Name: Variable Grid System
  • Features: allows for fluid or fixed, completely customizable, optional gutter widths, preview option.
  • File Size (unpacked): will depend on your layout options.

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

Visit the Variable Grid System Home

9. Grid System Generator

Grid System Generator Screenshot

 

  • Name: Grid System Generator
  • Features: very flexible, generate on the fly, choose from optional grid setups and design rules, great resources and documentation.
  • File Size (unpacked): dependent on your layout and includes.

This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.

Visit Grid System Generator Home

10. BlueTrip CSS Framework

BlueTrip Grid Screenshot

 

  • Name: BlueTrip CSS Framework
  • Features: 24 column grid, typography styles, form and print styles, button styles, status message styles.
  • File Size (unpacked): ~16kb

A full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli (hence the name), Hartija, 960.gs, and Elements, but has now found a life of its own. BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing. Download the package, include the images and stylesheets in your site structure, and get going!

Visit BlueTrip CSS Home

The next step

Ok, so now you've got the resources to structure your content properly. What's next? Structuring in all its glory but it will be a big waste of time if your site doesn't perform as it should. It is therefore crucial that you get a quality hosting plan. With hundreds of plans to choose between it can an overwhelming and time-consuming task finding the perfect match. To save you the effort we asked our editors to choose three providers they would recommend to people that don't want to spend a fortune but still require all the best features. They are:

JustHost

iPage

Myhosting

Further Resources and Tutorials

Rating: 4/5

Your Rating:

Comments

  • brecke

    17:06, December 11, 2009

    Gravatar

    you forget http://fluidgrid.net/ which i found perfect for fluid layouts.

  • byter

    18:23, December 12, 2009

    Gravatar

    While I appreciate the list I'm disappointed that there's really not much in the way of a review.

  • Anton Zolotov

    19:41, December 14, 2009

    Gravatar

    Great post!

    I wrote a short tutorial for Ruby on Rails on how to dynamically assign "first" and "last" classes to a generated grid, but it should also work in other languages/for other grid systems.

    Here's the link:
    http://antonzolotov.com/2009/12/05/assigning-first-and-last-to-blueprint-css-classes-with-rails/

  • website development in kildare

    16:00, June 12, 2010

    Gravatar

    thanks for showing us 10 great options for css framework. i would like to learn and use them in website development in kildare to save my time.

  • cremecode

    16:03, June 12, 2010

    Gravatar

    very nice collection will use it to develop websites in ireland. i think such post helps designers and evelopers alike to create nice user interfaces and website website development in kildare.

Add Your Thoughts



Raves & Kudos

Thanks for all the info dudes! You helped make my life easier!

- John from Soquel, California

Twitter feed