designGrid was born to address the need for a tool, that can help you when you're designing websites with fluid grids. Such tool, at the time being doesn't exist, and i needed one now! designGrid is not a grid framework! designGrid is a tool to help you make sure the different elements of your design aligns nicely with the grid. You can read about the background to the project here.


You can get the code from Github, either by downloading a .zip-file or by cloning the repository, like so:

$ git clone git@github.com:carlrafting/designGrid.git


designGrid comes with a stylesheet and a javascript file. To get started, dowload the project from GitHub, and then include the files in your project, like this:

Add this line inside your <head>

<link rel="stylesheet" href="path/to/css/designGrid.css">

And this one before </body>

<script src="path/to/js/designGrid.js"></script>

Or you can just copy-and-paste the code directly into your current stylesheet and javascript files.

Now, all that you need to do is call designGrid's init() method, and you're set!


Press g to toggle the grid on/off.


By the default there are 4 columns set, you can customize this by setting column_count to whatever value your design require.

  column_count: 6

You'll also need to change the css so that your columns and gutters uses the right widths. Then you're ready to go!

Browser support

designGrid is tested and is working in the following browsers: