We review 10 amazing CSS grid systems
Published: Dec 10, 2009
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
- 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.
2. YUI CSS Grid
- 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.
3. 960 Grid System
- 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.
4. Blueprint CSS Grid
- 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.
5. YAML Grid System
- 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.
6. CSS Boiler Plate Grid
- 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.
7. Golden Grid CSS
- 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.
8. Variable Grid System
- 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
- 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
- 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!
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:
Comments
brecke
17:06, December 11, 2009
you forget http://fluidgrid.net/ which i found perfect for fluid layouts.
byter
18:23, December 12, 2009
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
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
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
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.