12 Flexible Grid Tools for Responsive Websites

Websites and humans have one thing in common. Both went through a great deal of evolution and change. The only difference is that we took millions of years to get to where we are today. Websites took just 10 years. Gone are the days of creating just a nifty looking website with a cool banner and a Contact US page. New technology and innovation has given birth to new demands and requirements that today’s websites must be able to cope with. Nowadays, it is all about websites that are interactive and responsive.

Creating responsive websites is a pleasant and refreshing shift from the previous paradigm of website design. There are 2 very important elements to creating such a website:

  • Create a flexible fluid grid
  • Including Responsive Images

Today’s post will keep the focus on fluid grid tools and highlight 12 of them that can be used to create flexible and responsive websites.

1. Fluid Grids

A very handy tool for creating fluid grid with the same name, Fluid Grids is ideal for highly sophisticated web design requirements where one needs to create their very own custom grid.

Download Link: http://csswizardry.com/fluid-grids/

2. Gridset

This tool is now officially in Beta. Users have the ability to not only create grid sets but also save and manage them and integrate them into different projects. It’s highly advanced algorithm anticipates every possible column configuration and provide users with a simple set of classes to create their layout.

Download Link: http://gridsetapp.com/

3. Responsive Calculator

This tool by Stu Robson is based on a ‘pixels to percentages’ functionality. While there are many others like it, this tool is unique because it not only creates fluid grids, it also generates all CSS rules for the user which can be copy pasted directly into the stylesheets.

Download Link: http://rwdcalc.com/

4. Gridpak

This is one of the newest of grid generators. It allows users the ability to set columns and gutters at a number of breakpoints after which it outputs PNG files, JavaScript, CSS, whatever it is the designers are working on. This method ensures that the entire design team is working from the same starting point and thus improves efficiency.

Download Link: http://gridpak.com/

5. Semantic Grid System

CSS and web design go hand in hand. Nowadays pre-processed CSS’s are all the rage among designers and this is where Semantic Grid System comes in. This tool utilizes pre-processed CSSs in a highly efficient manner in the grid system without using any unnecessary classes.

Download Link: http://semantic.gs/

6. Columnal CSS Grid System

Nicke Gorsline of Pulp+Pixels created this grid tool based on the 1140px grid system. However that’s not all. This CSS grid system also comes with a design kit that contains highly useful sketch sheets and templates for CSS debugging styles.

Download Link: http://www.columnal.com/

7. Simple Grid

This design tool really lives up to its name. It’s extremely simple to use designed from the ground up with website responsiveness in mind. It’s easy to step for any website project.

Download Link: http://simplegrid.info/

8. Golden Grid System

Users of this tool have rightfully crowed it a very handy nickname; folding. This is because this grid tool easily ‘folds’ from 16 columns to 8 and then 4 if needed. The Golden Grid System also features a small browser overlay which is extremely useful when testing. Check out the website for the latest and most up-to-date version.

Download Link: http://goldengridsystem.com/

9. Foldy960

Another grid tool with a catchy name, Foldy960 is the marvel of Paraval Inc. and it has almost the same functionality as the Golden Grid System.

Download Link: http://github.com/davatron5000/Foldy960

10. SUSY

Finally a tool just for Sass users. SUZY creates a grid system that uses no special classes or markup when creating fluid grids. In that sense it is almost similar to the Semantic Grid System, only that SUSY has a catchy name.

Download Link: http://susy.oddbird.net/

11. A Better Photoshop Grid for RWD

We can’t talk about Grid Tools and not mention this one. Unlike the Columnal CSS Grid System that works on 1140px, this one uses a 1000px base. The round number makes calculating percentages much easier all thanks to its creator, Elliot Stocks.

Download Link: http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

12. 1140PX CSS Grid

Someone had to step up to Nick Gorsline. Andy Taylor created the 1140px CSS Grid tool, also based on the 1140px approach. The tool allows great versatility since it can accommodate resolutions ranging from widescreen monitors to Smartphone mobiles.

Download Link: http://cssgrid.net/


The idea behind this post is not to enforce all of the above mentioned Grid Tools on web site designers. In fact the goal here is to educate them on the tools and technology that is currently out there that they can utilize. Designers are encourages to try out these tools and use them in their design projects. Go through a process of elimination and then determine which tools work best for you.

About the author: Jennifer Mathews is a creative design consultant for LogoSnap.com. For over five years she has been helping small businesses create a brand image and grow their online presence. Jennifer likes to stay ahead of trends, explore new mediums and blog about her experiences.

These articles are formulated deep within the Creativeoverflow compound. Picked by hand and posted by the team over at HQ. They usually comprise of new releases, news, opinions, questions, giveaways, freebies and more.