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. You get a nice visual representation of the results, click preview on a result and you get a better presentation of how the grid can be used. When you have decided which grid configuration you want to use you can download the configuration as a css file to use in your project.

Total width
Column width
Gutter width
 

Instructions

Start by entering the total width that you want your grid to be, we have set the default to 960 since itīs easily divided by a large range of numbers and fits all modern monitors.

Next enter min and max values for the column and gutter width by using the sliders or input fields. The larger gap you enter the more combinations we will be able to find, if you get to many combinations narrow the column and/or gutter width. If you get the message that there are no possible combinations you have to try a less specific search by widening the gap between the min and max values.

In the list of possible combinations you can remove the alternatives that you donīt like by clicking the remove link.

Background

Have you ever spent time trying to construct a grid system that suits your needs? So have we, and we know itīs a time consuming and tedious task. When we started using Blueprint as our CSS framework of choice we discovered a great little tool called BlueCalc which calculates and generates grid system for Blueprint. Unfortunately we have discovered that BlueCalc is not able to calculate all possible combinations that exists and it only generates the grid CSS for Blueprint v0.8.0.

Therefore we decided to create our own version based on the same idée and at the same time introduce some improvements that we wanted for our self. Our hope is that you will find this tool useful and that it will save you time that you can spend on other tasks. If you have any ideas or suggestions please let us know so that we can make this tool even better.