10 Really Outstanding and Useful CSS Grid Systems

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? ;)

Comments

  1. says

    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. says

    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. says

    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.

  4. mike says

    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…

  5. says

    @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!

  6. says

    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.

  7. folkert groeneveld says

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

  8. Paulo Gomes says

    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.

  9. says

    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…

  10. says

    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?

Trackbacks

  1. 10 Really Outstanding and Useful CSS Grid Systems…

    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 g…

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *