We review 10 amazing CSS grid systems

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.


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

11. ElastiCSS


• Name: ElastiCSS (as in elastic CSS)
• Features: Highly refactored and well-named, which makes it intuitive and easily expandable
• File Size (unpacked):

Elastic is a powerful CSS framework that uses a declarative syntax language. It takes some getting used to, but once a user masters it, he or she can simply express the site needs rather than be bogged down in dense code and cryptic class names.

Visit ElastiCSS

12. Elements


• Name: Elements CSS Framework
• Features: Easy to use; lightweight; many preset classes; mass reset
• File Size (unpacked): varies; can be very small

More than a CSS framework, Elements is an advanced but intuitive project workflow. The core goal with Elements is to be extremely fast and efficient, and it manages to do that exceptionally well.

13. jQuery


• Name: jQuery UI CSS
• Features: powerful; versatile; layout helpers; widget containers; interaction states and cues
• File Size (unpacked): 12KB+

The jQuery UI system is a JavaScript-powered web platform that includes a robust CSS framework. Developers can use the CSS framework, including just the grid aspect, separate from the rest of the platform, but the entire platform is worth considering, especially for large projects.

Visit jQuery

14. Baseline


• Name: Baseline
• Features: Baseline grid; conforms to all typographic standards; 2-4 columns plus 1-2 sub-columns per
• File Size (unpacked): as small as less than 1KB

Baseline is a lightweight typography-centric CSS framework. The grid aspect can be used separate from the greater whole. The Baseline grid maximizes readability, and has a maximum of eight columns. For developers who want a simple 2- or 3-column grid, Baseline is a superb choice.

Visit Baseline

15. 52 Framework


• Name: 52 Framework
• Features: comprehensive grid framework; 16 columns; CSS3/HTML5
• File Size (unpacked): 4KB+

The 52 Framework is one of the few completely CSS3/HTML5 frameworks available. It’s a comprehensive platform, and the grid system used is based on 16 columns, 52 pixels and 8-pixel gutters.

Visit 52 Framework

16. Less Framework

Less Framework

• Name: Less Framework 4
• Features: For adaptive websites; single grid with 4 layout options and 3 typography presets
• File Size (unpacked): 1KB

The concept behind the Less Framework is to do more with less. The approach is lightweight and simple, and the layouts look great on computer, smartphone and tablet browsers. Less is also preconfigured to work with a wide range of popular free third-party web-building resources.

Visit Less Framework

17. Inuit


• Name: inuit.css
• Features: powerful; very progressive; flexible; mobile-friendly
• File Size (unpacked): varies; potentially very small

Inuit.css is a CSS framework that puts an emphasis on custom generation of CSS. In fact, using the online grid builder, a developer can create and download a simple single-file grid system that needs no other aspect of the Inuit system. The full system is a robust solution that can serve as the foundation for any type of website.

18. LogiCSS


• Name: LogiCSS (as in Logic CSS)
• Features: three distinct grids, all customizable via the toolset; elastic, liquid and fixed layouts
• File Size (unpacked): ~2KB

Logic is a lightweight framework that lets a developer easily use only the files needed. There are several distinct grid layouts, numerous layout options, and a grid builder, which allows for quick customization.

Visit LogiCSS

19. FEM


• Name: FEM CSS Framework
• Features: Easy to learn; fast development; 960px width; 12-column grid; CSS common styles
• File Size (unpacked): 8KB

Based on the 960 Grid System, FEM is a simple and straightforward 960px 12-column system. If a developer wants versatility, 960 is a better bet, but FEM is perfect as a basis for custom work, or for getting a basic website up and running quickly.

Visit FEM

20. Emastic


• Name: Emastic
• Features: lightweight; baseline grid; fixed and fluid; elastic
• File Size (unpacked): 3KB

Emastic is a very nice, and still evolving, lightweight CSS framework. It works well just as a simple grid, and developers can easily drop in gadgets, semantics, templates, styles and so forth.

Visit Emastic

21. 1140 Grid


• Name: 1140 CSS Grid
• Features: 12 columns; great mobile support; Photoshop templates
• File Size (unpacked): ~4-5KB

As displays get increasingly larger, one problem with the 960 approach is that it can look odd on larger displays. The 1140 CSS Grid system is a unique approach in that it designs at 1140, and displays perfectly at 1280 and below.

Visit 1140 Grid

22. W3C CSS Grid Positioning Module


• Name: W3C CSS Grid Positioning Module Level 3
• Features: W3C conformance; traditional grid, like those used in newspapers and books
• File Size (unpacked): ~1KB

The W3C’s grid positioning module is a straightforward CSS3 implementation that’s efficient and standardized. It’s an excellent resource as a launching point for a custom project, and it serves quite well as the basis for a basic site, particularly those with a newspaper-like style.

Visit W3C CSS Grid Positioning Module

23. YUI 3


• Name: Yahoo User Interface CSS Grid v3.x
• Features: Extensive development; large and active community; source order independent; fluid and fixed layouts
• File Size (unpacked): ~8KB

Earlier in this list, we examined YUI 2, which is one of the most popular CSS grids. YUI 3 is its next evolution. One day it will completely supplant YUI 2, but it’s not there yet. In the meantime, you can use YUI3 to augment a YUI 2 implementation in a wide range of ways. As a standalone solution, it works, but it’s missing some of YUI 2’s best features.

Visit YUI 3

24. Foundation


• Name: Foundation
• Features: 12-column mobile-scaling semi-liquid grid
• File Size (unpacked): 54KB

Foundation is a 12-column responsive grid framework that’s future-friendly, and it works extremely well on modern small-screen devices. The only issue with Foundation is that it’s not well refactored. So unless you want to dig around the code, it’s an all-or-nothing option.

Visit Foundation

25. MQFramework


• Name: MQFramework
• Features: 12-column responsive grid utilizing the @media property
• File Size (unpacked): at least 6KB

The MQFramework started as a CSS grid for iPads, but has since developed into a CSS grid that supports any resolution, and it’s available in both a fixed and fluid version.

Visit MQFramework

26. Fluid


• Name: Fluid Baseline Grid
• Features: Device agnostic; resolution independent; CSS normalization; typography standards
• File Size (unpacked): 9KB

Fluid Baseline Grid is a system that combines the principals of mobile first, baseline grids and mobile layouts. It also includes typographic standards, CSS normalization and built-in techniques for all known browser inconsistencies.

27. Columnal


• Name: Columnal
• Features: wireframe templates; built-in debugging; sub-columns
• File Size (unpacked): 18KB+

Columnal is a responsive CSS grid system that blends the 1140 and 960.gs approach. Columnal is in active development, which is the only reason we don’t rank it higher. Columnal is an excellent choice for developers who want to take advantage of big screens while still supporting small ones.

Visit Columnal

28. Semantic


• Name: The Semantic Grid System
• Features: Versatile; clean-code approach
• File Size (unpacked): 3KB

The Semantic Grid System is a responsive CSS platform that provides the developer with a lot of versatility without requiring verbose and ugly code. Developers can set column count, column width, gutter width and switch between pixels and percentages easily and cleanly.

Visit Semantic

29. Skeleton


• Name: Skeleton
• Features: Responsive; boilerplate; mobile friendly; big screen friendly
• File Size (unpacked): ~23KB

The Skeleton boilerplate delivers a responsive CSS grid that is mobile friendly, and works on small and large screens alike. Skeleton includes many features beyond the grid element, but developers can easily use just the grid, or add other elements as needed.

Visit Skeleton

30. BluCSS


• Name: BluCSS
• Features: 10 columns; containers; responsive layout; responsive images
• File Size (unpacked): 8KB

BluCSS is a single-file CSS framework with a responsive grid. The core goal here is to be simple and intuitive. Nevertheless, BluCSS has a lot of potential, and it’s an excellent starting point for developers who want to build their own grid framework.

Visit BluCSS

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:

Further Resources and Tutorials

Written 2009-12-10 (Updated 2016-10-10)

Chad Bean

Share your thoughts

enomsoft,  8 October, 2010

Superb collection. thanks for info.

cremecode,  12 June, 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.

website development in kildare,  12 June, 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.

Anton Zolotov,  14 December, 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:

byter,  12 December, 2009

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

brecke,  11 December, 2009

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

Show all related articles..

Overall Best Web Hosts

Buying Guide

Are you finding it difficult to understand what type of hosting you need or which provider to go with? Go through our guide and find the best solution


User Reviews

Make your voice heard! Rate and review your web hosting provider - good or bad, we want to know

Everything has been very stabile and I was very impressed with all the features and extras that were included in the plan.

Bill about iPage

Read iPage Review

Why wait? Get today's best deals now!