Grid systems: Discover the perfect building blocks for your website design

Default avatar.
June 09, 2014
Grid systems: Discover the perfect building blocks for your website design.

We all start somewhere. As a new designer, I couldn’t have cared less about structure in my designs. I would open up Photoshop, and push pixels around until I made something that I thought looked cool. As I learned to code, my process was similarly haphazard. I do not look back on the old days with too much fondness. My work was sloppy and unfocused. I had no clear goals. As a beginning, I suppose that isn’t so bad, considering that most of my design education came from Photoshop tutorial sites, my work wasn’t terrible. But then I learned about grid systems. I forget exactly when and how they became popularly used in web design, but all of a sudden, every web-design-related site I went to was bursting with articles about 960​.gs, or some other grid system. The importance of providing a consistent visual structure in our layouts was emphasized by all the big names, and turned into a trend. Just as rapidly the trend became an industry standard, and now most of us don’t think twice about whether or not we are going to implement a grid system. The only question is, which one? Will we go with one of the big names or a lesser-known variant, or even make our own? In this article I’d like to take a look at the second option: new and lesser-known grid systems. There is always someone out there coming up with new ways to solve the various problems of layout, and I think it’s important to be familiar with as many approaches as possible, so let’s look at some basic grid frameworks.

Simple grid systems



is all about equal column distribution. It can accommodate unequal distributions as well, but that is not the primary purpose of this grid system. For those of you who want to divide most or all of your pages into horizontally equal portions, this is your framework. How it works The framework is designed to be adaptable to your needs, so you don’t just download and go. You need to configure your grid on the project’s home page first. A quick form allows you to determine how many columns will fit in a row, how big your margins will be, and whether or not to apply CSS3 transitions to your columns when your viewport changes size. The code itself is divided into two CSS files: one with the base code, and one with all of the media queries. The CSS classes are simple. Applying ‘.col_​1’ to a column will fill the row to 100%. ‘.col_​2’ will create a column with a width of 50%, and so on. In addition img elements, objects, and some others are automatically resized. There is an extra class to help video objects behave. The project’s website provides advice on how to get Facebook and Twitter embeds to play nice. Drawbacks There doesn’t appear to be any way to nest columns, or create more complex column arrangements inside a single row. On the other hand, if you don’t need complexity, and you just want a simple framework that you can adjust whenever you need to, 34Grid will do the job.

Simple Grid

Simple Grid

is a responsive option that maxes out at a width of 1140 pixels. In other words, while it is designed to play nice with tablets and phones, Simple Grid makes sure that larger screens aren’t left out. How it works As the name would imply, this grid system is quite lightweight. The whole thing comes in a four-kilobyte uncompressed CSS file. Class names are designed to be easily understood: ‘.col‑2 – 6′ will divide the row into six columns, and define the column width to two columns wide. Each row can be divided into one column, ‘.col‑1 – 1’, or two, three, four, etc. all the way up to twelve. Drawbacks Like 34Grid, there doesn’t seem to be any provision made for nesting columns. Also, the way margins are handled for first and last columns, may cause difficulties when creating, for example, a photo gallery.


This one

is for anybody who prefers a simple grid with plain-English class names. It’s responsive, easily understood, and quickly implemented. How it works After your usual ‘.container’ and ‘.grid’ elements are put in place, the columns are implemented the old fashioned way. One class (‘.unit’) is used to define the general attributes of a column, and another class is used to define the width. Rows can be split into 2 – 5 columns, and the class names all look something like this: ‘.one-of-three, .two-of-three’. Also included are some basic typographical styles. Drawbacks Once again, this is a grid framework meant for uncomplicated layouts, so no provision for nested columns. Also there is only one break point, set at a viewport width of 650 pixels, so some of your columns may prematurely end up rather wide.

Advanced grid systems

Proportional Grids

Matt (AKA Boon) is a bit like me. He loves design, but doesn’t love math quite as much. As a result, his Proportional Grids seem to do away with endless calculations as much as possible by depending on the box-sizing property. The result is a complete, but still pretty lightweight, grid system that covers your bases for responsive layout. How it works When I say that this system depends on box-sizing, I mean that columns are given percentage widths without accounting for gutters. Fixed-width gutters are defined by padding; and box-sizing makes sure the columns play nicely together. Gutter widths and most other measurements are defined with ems”. True to the name of this grid, column classes are proportional (ie. .col-one-third, .col-two-thirds), and columns are more or less infinitely nestable, which is something I like very much. Classes are included for changing column dimensions at three different break points. The media queries themselves are structured in the mobile-first” fashion, in keeping with standard practices. There is a separate stylesheet for Internet Explorer 8 and older. Seeing as IE8 does not support media queries, and versions older than that don’t support box-sizing, they are provided with a fixed-width layout. Also included are SASS (both .sass and .scss) files for quick and easy customization of the grid system. Drawbacks I wouldn’t mind having some more column widths to work with (fifths, sixths, eighths). Otherwise, this is a largely error-free and well-rounded grid system.


Of the advanced grid systems on this list, One% is the simplest, but it is by no means incomplete. It’s designed to accommodate somewhat larger screens, and large UI elements, if its home page is any indication. The name comes from the fact that the grid and column width is calculated so that it always equals 99%, instead of 100%. This eliminates the need for some of the more complex repeating decimals and number-rounding that browsers are often forced to do. How it works The grid itself is divided into the classic twelve columns. The classes are simple (.onerow, .col1, .col6), and I like that you, mostly, only use one class per column. Two break points are included by default: 768 pixels, and 1024 pixels. If I’m honest, that first one seems a bit… big… but you can always add another break point if you need one. Two desktop layout width examples are also provided: 1000 pixels, and 1200 pixels. On the projects home page, you can download Photoshop action files and PSDs suitable for mocking up your layouts with this grid system. Drawbacks My two big problems here are the usual ones. First: no nesting columns. Nesting columns are good, people! Second: The last column in every row needs to have the .last class applied to it.


A cross-browser CSS grid framework that doesn’t hide pixels in margins! That’s the tagline for Flurid, and a quick look through to documentation will tell you why: Flurid’s creator really doesn’t want your layout to break. Ever. Here’s the thing, because of the way sub-pixel rounding works, a browser will occasionally say screw it” and put the last column in the row somewhere it shouldn’t go. Flurid is built for stability, so that your layout will always work, even on older versions of IE. (Compatibility is listed as IE5+.) How it works Flurid has all the features you’ll need: regular columns, mixed columns, nested columns, and shifted columns. The list of possible column widths and classes is extensive, and ratio based, so you’ll want to give yourself time to get familiar with them. Some reasonably complete documentation is provided via GitHub, as well as a jQuery plugin that adds extra features — yes, it comes with its own jQuery plugin, which provides equal height columns, and can put alternating classes on your columns, for your styling pleasure. Drawbacks It’s that pesky .last class again. Still, according to the documentation, there’s a good reason for it this time.

Ezequiel Bruni

Ezequiel Bruni is a web/​UX designer, blogger, and aspiring photographer living in Mexico. When he\‘s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…