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.
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 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.
A flexible width, component based CSS layout system that makes heavy uses of inline-block elements.
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 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.
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.
A popular variant of 960.gs with a fluid layout that automatically adjusts its width depending on the browser window size.
“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.
Awesome New(er) Frameworks
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.
Less Framework is a responsive CSS grid system for designing adaptive websites. 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!
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.
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.
(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.
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.
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.
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.
Small Footprint Frameworks
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!
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.
Just like the 1KB grid only fluid for added fun.
SlimCSS is a light CSS Framework thats sets a solid cross-browser foundation with many essential features while staying as small as possible.
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.
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.
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.
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.
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.
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.
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.
This framework is mostly aimed at typography, but there is a very lightweight grid system in place as well.
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.
A lightweight fluid grid CSS framework with a focus on typography.
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.
Frak is a CSS framework for creating fluid grids. It has an interesting concept that involved using multipliers as class names.
Grid a simple and minimal fluid grid system that can flow inside any fluid or fixed container or play good with another Grid system.
A grid system for designing Facebook pages, crazy but true.
Tools and Grid Builders
A really awesome grid calculator with Photoshop and Illustrator template support.
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.
GuideGuide is my new favorite Photoshop plugin. This free tool automatically places guides in your Photoshop document based on your input.
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.
A super simple and effective custom grid builder.
A really great and under appreciated tool that allows you to build custom implementations of Blueprint. Check out my tutorial here.
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.
A great grid builder that dishes out a really simple grid with a tiny footprint.
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.
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).
Grid Lover Sites and Must-Read Articles
A web design gallery full of awesome examples of grid-based design.
Another great site dedicated to grid-based tools, articles and other resources.
A one-stop shop for all things grid-related. It’s an old source but it looks like it’s still updated regularly.
An unbeatable primer on grid-based design fundamentals. This should be step one in your grid design quest.
An complete beginner’s introduction to the 960 grid system by yours truly.
An older Smashing Mag article, but it still has tons of great resources and information to check out.
Mark Boulton discusses how native CSS support for grids should work. A great read!
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?