SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

10 Really Outstanding and Useful CSS Grid Systems

April 11, 2010 by Joel Reyes 42 Comments

Grids are an invisible foundation that structure the websites we develop and design. This invisible foundation makes it possible for rapid development, concise code, and a much more organized layout.

Of course you’re not obligated to use a grid, and grid-less websites are fine if the random structure is intended, however, if avoidance of a CSS grid is due to lack of planning, then users will be able to pick up on that at an instant.

Once you’ve defined the elements you’re going to embed into your layout, then experimenting with a variety of grids is encouraged. Simply because experimentation and curiosity will allow you to find out which grid systems work best for you and your projects.

Benefits of Implementing a Grid System

A Grid…

  • Gives your design consistency
  • Allows flexibility between elements
  • Can make your designs more usable and legible
  • Reduces CSS coding errors
  • For the most part, it eliminates the need for nested HTML tables
  • Can be used sort of like a wireframe allowing you to plan
  • “Blesses” you with cross-browser support
  • Streamlines your development process for future projects
  • Acts as an adhesive and encourages the correlation between separate page elements
  • Makes it easier to embed images, text, and other visual aesthtics

The Grids

Golden Grid CSS

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. This grid system has absolute proportions, structure on the rule of thirds, contains symmetry, asymmetry, usability, accessible typography and more!

Download

960 Grid System

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.

Download

1 KB Grid

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. As you would expect, there is a class that corresponds to each of the possible column widths, units 1 through 12. 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 columns.

Download

Tripoli Framework

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects. Tripoli doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

Download

BlueTrip CSS Framework

This grid system is a full featured and beautiful CSS framework which originally combined the best of Blueprint, Tripoli, 960.gs, and more. 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

Elastic CSS Framework

Elastic is a simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.

Download

Content With Style

The Content With Style CSS Framework has a fixed width layout with a few styles such as 1 content column, vertical navigation, and more. It also gives way to rapid development of websites with pre-written components.

Download

Blueprint CSS Grid System

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.

Download

SenCSS

SenCSS stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style. It doesn’t include a layout system littered with silly classes and pre-set grids, so what does SenCSS do for you? SenCSS does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.

Download

YAML Framework

YAML was conceived as a basis for developing flexible layouts, with a strong emphasis on meeting the challenges that result from working with elastic containers and varying units. All CSS components of the framework as well as the various layout methods are thoroughly documented in both English and German, supplemented by numerous examples. YAML is oriented to web standards and the demands of accessible web design. A continuously expanding active community has formed around YAML.

Download

Your Turn To Talk

I hope you liked this post! Please take a minute to chime in and leave a comment below. Which CSS Grid system(s) do you use and why do you prefer them over others? ;)

Author: Joel Reyes

Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.

Filed Under: CSS, Design, Resources, Tools

Comments

  1. Andy Gongea says

    April 11, 2010 at 2:48 pm

    Grid systems are useful in the development stage while in production I think there is a lot of code that you don’t need from these systems.

  2. Martin Hyde says

    April 11, 2010 at 3:00 pm

    I do use grids to design with but I create all the CSS my self rather than using a framework. Have looked into some of the frameworks in the article in the past, but the consensus was very much what Andy said in his comment. Thanks for the article

  3. michelle says

    April 11, 2010 at 3:28 pm

    I really like the 960 grid system

  4. Fidget says

    April 11, 2010 at 4:15 pm

    I just came here from Smashing Magazine and the catchy heading caught my attention.

    Really awesome collection, I only knew of the 960 grid system. Didn’t know that there were so many. BlueTrip also looks really nice.

  5. Baloot says

    April 11, 2010 at 4:45 pm

    This grid systems can easily implemented when using Thesis themes. Am I right?

  6. mike says

    April 11, 2010 at 5:04 pm

    I never understood the need for grid systems and css frameworks. Maybe they speed things up for a total CSS beginner or when more than one person work on a site. But they come with a lot of overhead.
    As pretty much 99% of sites I do need a header, footer and 2 or 3 columns, I developed my own simple page framework and tested it with pretty much any browser on any OS I could get my hand on. I’m using it as a starting point and go from there. This way I know all of the CSS and can adapt it, add to it etc…

  7. Dave McFarland says

    April 11, 2010 at 5:07 pm

    OK. But which one is best? Or at least, is there a chart comparing the pluses and minuses of these frameworks?

  8. Joel says

    April 11, 2010 at 8:20 pm

    @Baloot

    Sure, however, the Thesis theme from my understanding already comes bundled with a neat CSS structure, so you can implement one of these grids, but I would stick to its original structure.

    @mike

    I definitely understand where you’re coming from, and thank you for your input. The fact that you’ve managed to develop your own grid system is fantastic. As long as it works well for your projects that’s probably better than implementing one of the above grid systems. Since you’ve developed it you’re much more acquainted with it and that’s an advantage you’d have over anyone who would be trying out a new grid system for the first time.

    @Dave McFarland

    We leave that up to you ;) What we’re mostly trying to infer here is, that experimenting and trying a few of these grid systems is perfectly okay. Before making a choice or having us make a choice at the end of this post, it would be best for you to choose a few and test them out. This way you’ll be able to better find and choose the one that works best for you. Thank you for the comment!

  9. QQ says

    April 11, 2010 at 9:23 pm

    I love using YAML~

  10. papayashake says

    April 11, 2010 at 11:43 pm

    Excellent article… thanks for sharing…

  11. Mario says

    April 12, 2010 at 2:46 am

    Hi,

    My favorite is OOCSS, especially for fluid Lotus Notes XPages programming. You can read my evaluation here: http://www.mario-gutsche.de/2010/03/choosing-a-fluid-css-framework/

  12. Tom Hermans says

    April 12, 2010 at 5:15 am

    I used 960.gs in the past, now more working with Bluetrip.

    This is not only a timesaver, but they don’t create that much of overhead. And if you build sites with a grid, with many different columns, then it’s handy you just need to assign the right classes to the divs.

    ToM.

  13. Manjit Sohal says

    April 12, 2010 at 5:16 am

    I currently use the variable grid system from http://www.spry-soft.com/grids/ , its done a fantastic job for me, so thats worth checking out too!

    great article, very useful, thanks!

  14. folkert groeneveld says

    April 12, 2010 at 6:03 am

    YAML is my first choice. It fits to nearly every Browser and is very flexible.

  15. ced says

    April 12, 2010 at 7:56 am

    what about http://baselinecss.com/ ?

  16. Eduardo Merlo says

    April 12, 2010 at 8:46 am

    I’ve tried several of this frameworks, with some degree of success. Bluetrip is one of the most useful, but I’m actually using Simple (http://rgarcia.cl/simple/index.html), a very minimalistic CSS framework, with much room to customize for my own needs.

  17. Christos says

    April 12, 2010 at 4:58 pm

    I really think compass (http://compass-style.org/) is the only real framework for css

  18. Paulo Gomes says

    April 12, 2010 at 5:01 pm

    I start using blueprint and changed to 960, for a drupal project. Both are simple to use and very identical, but 960 seems more simple and produces less overhead.

  19. Jae Xavier says

    April 12, 2010 at 5:16 pm

    I love grid systems, especially in print design. But don’t be fully constrained by it!

  20. Billco says

    April 12, 2010 at 11:24 pm

    I don’t “get” grid systems. We’ve spent years telling (or being told) to quit using tables for everything, and now people are going back to using table-like structures in this roundabout way. You might as well stick to real tables with COLSPAN and ROWSPAN, the result is the same, except all you need is one simple CSS rule on the TD cell.

    I mean, I know I’m being pedantic, but if it looks like a table, and quacks like a table…

  21. tim says

    April 13, 2010 at 12:36 pm

    Nice list. I would have included Emastic:

    http://code.google.com/p/emastic/

  22. Paweł P. says

    April 13, 2010 at 12:51 pm

    Very good list, but I must agree with @Christos.
    Compass + SASS best performers for CSS building.

  23. Chris Beaman says

    April 13, 2010 at 1:11 pm

    It’s a great post but I always wonder why authors present so many options in a list. I kind of wish you’d pick and highlight one, since I don’t have time to go through and test and explore each one. Is there one you’d recommend that works specifically well with, say, Coda?

  24. viettel says

    April 14, 2010 at 1:19 am

    Most of people prefer using 960 Grid System but i still like the Blueprint css Grid.

  25. clea walford says

    April 14, 2010 at 6:09 am

    great article, thanks a million!

  26. Web Risorsa says

    April 15, 2010 at 7:21 pm

    Very nice collection… Grid system a new way for modern designers…

  27. Mateus Souza says

    April 19, 2010 at 8:11 am

    Great!
    Add – http://www.linhaframework.com/

  28. Jordan Walker says

    April 21, 2010 at 9:49 am

    So many to choose from, what happened to the day when you just hand coded minus frameworks.

  29. Chris Johnson says

    November 29, 2010 at 7:53 pm

    I just made my own grid with LESS.js called: LESS Griddy http://less-griddy.webatu.com/ Check it out, I love grids, but this one allows for Dynamic Grids that calculates all the math for you :)

  30. Brett Widmann says

    December 9, 2010 at 12:53 am

    This is a really great article. I enjoy the overview and added resources at the bottom.

  31. Anonymous says

    March 17, 2011 at 8:14 pm

    I’m trying out Columnal, a responisve grid system that works really well with mobile devices too. http://www.columnal.com

  32. John says

    May 23, 2011 at 7:10 pm

    Good article, thanks. Here’s a new 960 based grid I came across recently: http://www.16×60.com

  33. Brian says

    August 15, 2015 at 8:47 am

    Thanks for the roundup.SASS is best performing for CSS building

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Search SpyreStudios

Web Design Jobs

Development & Programming Jobs

Graphic Design Jobs

Computer & IT Jobs

UX Design Jobs

LiquidWeb

Level up professionally!

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

Envato

SpyreStudios © 2021