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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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? ;)
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.
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
I really like the 960 grid system
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.
This grid systems can easily implemented when using Thesis themes. Am I right?
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…
OK. But which one is best? Or at least, is there a chart comparing the pluses and minuses of these frameworks?
@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!
I love using YAML~
Excellent article… thanks for sharing…
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/
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.
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!
YAML is my first choice. It fits to nearly every Browser and is very flexible.
what about http://baselinecss.com/ ?
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.
I really think compass (http://compass-style.org/) is the only real framework for css
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.
I love grid systems, especially in print design. But don’t be fully constrained by it!
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…
Nice list. I would have included Emastic:
http://code.google.com/p/emastic/
Very good list, but I must agree with @Christos.
Compass + SASS best performers for CSS building.
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?
Most of people prefer using 960 Grid System but i still like the Blueprint css Grid.
great article, thanks a million!
Very nice collection… Grid system a new way for modern designers…
Great!
Add – http://www.linhaframework.com/
So many to choose from, what happened to the day when you just hand coded minus frameworks.
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 :)
This is a really great article. I enjoy the overview and added resources at the bottom.
I’m trying out Columnal, a responisve grid system that works really well with mobile devices too. http://www.columnal.com
Good article, thanks. Here’s a new 960 based grid I came across recently: http://www.16×60.com
Thanks for the roundup.SASS is best performing for CSS building