The Ultimate Collection of 50+ Resources for Grid Lovers

by on 10th August 2011 with 8 Comments

If you love grid-based design, this article is for you. We’ve scoured the web and compiled every great grid resource we could find. We’ve got all the best frameworks, grid builders, how-to guides and more.

Commence browsing and bookmarking!

Hate Grid Frameworks?

Before we get started, I just want to say that I know full well that many of the people reading this are already bursting with anger about the evils of layout frameworks.

In truth, there’s a lot to be said against grid frameworks. They’re cumbersome, have a learning curve and often toss semantics out the window. Further, there are a million of these things, which makes it hard for discussions of standard practices to even begin.

If you fall into the camp of CSS framework haters, don’t worry there are still plenty of grid design resources below that have nothing to do with frameworks. In the mean time, here are a few alternatives to grid frameworks.

Rolling Your Own Grid Layouts On the Fly

I recently published a piece on how to easily achieve complex multi-column layouts quickly and all on your own without complicated frameworks or non-semantic class names. It’s so easy that you might never use a framework for layout again.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography. It doesn’t come with any predefined grid systems or non-semantic classes.

Stack Layout

A flexible width, component based CSS layout system that makes heavy uses of inline-block elements.

HTML5 Boilerplate

HTML5 Boilerplate is quickly becoming the standard starting point for modern web design projects. Last I checked it has everything you could possibly want with the exclusion of a grid system.

Old School Frameworks

These are the grandpa grids that have been around for years now. A few of them are really starting to show their age so you may or may not want to use them today.

Blueprint

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.

screenshot

960.gs

960.gs is where most people start when they get into CSS frameworks and grid systems. It’s still quite popular and many of the newer frameworks are based at least partially on the work here.

screenshot

Fluid 960 Grid System

A popular variant of 960.gs with a fluid layout that automatically adjusts its width depending on the browser window size.

screenshot

YAML

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

screenshot

Awesome New(er) Frameworks

Perkins

Perkins combines the shiny newness of HTML5 and CSS3 with the awesome power of LESS.js to create an ultimate CSS framework. If you love experimenting with futuristic CSS solutions, this is a great framework for you. It uses a variant of the 1KB Grid.

screenshot

Less Framework

Less Framework is a responsive CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. “Less” in this sense shouldn’t be confused with LESS.js from above. I know, it’s confusing. They need to name this one something else!

screenshot

Columnal

A responsive CSS grid system helping desktop and mobile browsers play nicely together. Columnal uses its own hybrid grid system that borrows from a few others.

screenshot

Skeleton

Skeleton is an awesome responsive framework that I’ve written about a couple of times before. If you’re not sure about the extra time and learning curve involved in responsive design, you should check this out. Skeleton is built loosely on 960.gs.

screenshot

52Framework

A framework that utilizes HTML5, CSS3 and JavaScript to maximize compatibility of modern web development practices across all major browsers. It’s based on a simple 16 column grid.

screenshot

G5 Framework

(X)HTML5, CSS3, PHP & jQuery Front End Framework. G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.

G5 Framework’s grid is based on Easy Grid.

screenshot

Easy Percentage Grid System with HTML5

The main characteristics of this grid system is that all the columns have percentage based width so they adapt to the container element. It means that with using this system you will not have to define a width of each column by hand, you can simply throw it inside any container and the column widths and column gutters will be automatically set.

screenshot

Cabin CSS

CSS Frameworks tend to be super bloated. Cabin solves this problem with a modular extension system that allows you to add only what you need. Various grid extensions are supported.

screenshot

jQuery Masonry

jQuery Masonry isn’t really a CSS Framework at all, it’s a JavaScript plugin that allows grid-based designs that use a sort of vertical float system. It’s an awesome tool that is quite popular right now.

screenshot

InuitCSS

This framework has it all: plugins progressive flexible mobile tablet sensible extensible accessible pragmatic functional useful production-ready more. The grid system is customized to your needs.

screenshot

Small Footprint Frameworks

1 line CSS Grid Framework

I thought that a single line CSS Grid sounded nuts, but this guy pulled it off. I’m not sure how practical it is in the real world but I’m impressed with the thought that went into it!

screenshot

1 KB Grid

This is one of my old favorites. It’s a grid system stripped to its absolute bare essentials, no sixty minute walkthrough video needed. If you don’t understand CSS grid systems, start here.

screenshot

Tiny Fluid Grid

Just like the 1KB grid only fluid for added fun.

screenshot

Slim CSS

SlimCSS is a light CSS Framework thats sets a solid cross-browser foundation with many essential features while staying as small as possible.

screenshot

Other Frameworks

Gravity

Gravity is a SASS based framework for making powerful, easily maintainable HTML5 websites. It helps you rapidly prototype your ideas and will generally make your life much easier.

screenshot

1140 Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

screenshot

The Square Grid

A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites.

screenshot

Fluid Grid

Fluid Grid is a new grid system that works the same way as Blueprint or 960, but with any page width, even fluid layouts. It is based only on CSS.

screenshot

EZ-CSS

EZ CSS is a completely different kind of grid framework. It uses a unique module system that allows you to copy, paste and nest simple layouts to create complex pages. It’s a little hard to wrap your head around but a really brilliant use of CSS.

screenshot

FEM CSS Framework

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts.

It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.

screenshot

Elastic CSS

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.

screenshot

Atatonic CSS

This framework is mostly aimed at typography, but there is a very lightweight grid system in place as well.

screenshot

Baseline

Baseline makes it easy to develop a website with a pleasing grid and good typography. The grid in Baseline is composed of 4 basic columns, for more flexibility each column can be divided in 2 units.

screenshot

Emastic

A lightweight fluid grid CSS framework with a focus on typography.

screenshot

Golden Grid

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.

screenshot

Frak

Frak is a CSS framework for creating fluid grids. It has an interesting concept that involved using multipliers as class names.

screenshot

Easy Framework

Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques. Includes a simple percentage-based grid system.

screenshot

Grid

Grid a simple and minimal fluid grid system that can flow inside any fluid or fixed container or play good with another Grid system.

screenshot

520 Grid

A grid system for designing Facebook pages, crazy but true.

screenshot

Tools and Grid Builders

Grid Calculator

A really awesome grid calculator with Photoshop and Illustrator template support.

screenshot

Grid Calculator and Generator

GridCalc is a easy to use grid calculator. Just enter the desired width of your page and an aproximate range for your column and gutter width and the calculator will give you all the possible combinations within the limits you entered.

screenshot

GuideGuide

GuideGuide is my new favorite Photoshop plugin. This free tool automatically places guides in your Photoshop document based on your input.

screenshot

3×4 Grid Builder

Grid Builder enables you to easily build an HTML grid with a simple drag
and drop interface. It’s a really interesting tool that allows you to create custom grids for each project.

screenshot

Gridr Buildrrr

A super simple and effective custom grid builder.

screenshot

Boks

A really great and under appreciated tool that allows you to build custom implementations of Blueprint. Check out my tutorial here.

screenshot

Variable Grid System

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.

screenshot

ZURB CSS Grid Builder

A great grid builder that dishes out a really simple grid with a tiny footprint.

screenshot

Griddle

Want to use a grid-based design without a framework? This tool creates a custom background image that makes it easy to achieve grid layout on your own.

Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

screenshot

Gridulator

Another background image tool like Griddle. The main difference being that Griddle generates a URL for you to drop in and this gives you an actual image (I like Griddle better).

screenshot

Grid Lover Sites and Must-Read Articles

Grid Based

A web design gallery full of awesome examples of grid-based design.

screenshot

Design By Grid

Another great site dedicated to grid-based tools, articles and other resources.

screenshot

The Grid System

A one-stop shop for all things grid-related. It’s an old source but it looks like it’s still updated regularly.

screenshot

Grid Based Design Simplified

An unbeatable primer on grid-based design fundamentals. This should be step one in your grid design quest.

screenshot

The 960 Grid System Made Easy

An complete beginner’s introduction to the 960 grid system by yours truly.

screenshot

Designing With Grid-Based Approach

An older Smashing Mag article, but it still has tons of great resources and information to check out.

screenshot

Rethinking CSS Grids

Mark Boulton discusses how native CSS support for grids should work. A great read!

screenshot

Conclusion

I hope you enjoyed this massive collection and have enough grid-based design resources to keep you occupied for months on end.

Leave a comment below and let us know what you think of the tools and resources above. Do you use any grid frameworks? Which ones and why?

Comments & Discussion

8 Comments

  • http://twitter.com/stephensauceda Stephen

    I love Griddle. Nothing to download, just set their URL as a background image and go. It also seems faster to me to manually key the few declarations I need using it than to have to go in and delete all of .grid_15 push_4-type stuff from all the other frameworks.

  • http://joelacevedo.com Joel Acevedo

    A really amazing list you have here. I am impressed on how many options are out there. Trying some of them now.

  • Grid Based

    Thanks for mentioning Grid Based in the article! :)

  • http://www.webdesigncreare.co.uk Kim Ruddock

    I always use the templates from 960.gs as a starting point for my designs. I will definitely explore some of the other options mentioned here though. I don’t see grids necessarily limiting creativity. I think it’s dependent on the aims of the project being worked on. Designers should not feel guilty about using structure in their work.

  • Johnathan

    I aways start with the 960.gs templates for expresseion design to do my wireframes and to begin the design process, but always set up my html and css on my own. I think Expression Design is getting overlooked with it’s capabilities to create wireframes and begin the design process.

  • http://www.onebrightdayconsulting.com Tyus

    I really like jquery masonry. I love how it will animate your resizing, and of course will a little planning it is great for responsive design.

  • http://www.oldworldcreative.com Evan Skuthorpe

    Nice collection. fluids ones are best ;)

  • http://jquer.in/ jay

    A great addition these resources will be jquerin grid builder ..its simple and outputs semantic code
    Try It

Subscribe

Membership
About the Author