Blueprint Grid CSS Generator

Version: v.0.7.1 (2008-02-25)


This Grid Generator is OUT OF DATE and UNSUPPORTED!
Please visit for the latest info.


This tool will help you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Updated to version 0.7.1! Please Note! The default Blueprint CSS files are already generated for you to copy below.


  1. Enter your desired number of columns.
  2. Your column width.
  3. Enter the width of your margin.
  4. Enter the desired page width.
  5. Click 'Generate CSS' button and copy the results from the Generated Code section.

Generator Form:






Generated Code:

Click in the text area below to copy all the CSS code and save your versions of grid.css, compressed.css and grid.png. Click tabs below to switch between files.


Drag image to your desktop or right/control-click on the image to save it.



A big Thank You ! goes out to all the developers involved in Blueprint CSS. You guys have helped me loads.


The code for this 'solution' is released under the same licence as Blueprint. Please feel free to use as you wish. IF you make improvements to the script, please let me know, so I too can benefit from those improvements ;-)

NB! The downloadable version is unfortunately out of sync with the current version on this site.

Download .zip file (47 Kb)

© Copyright 2007 kematzy at gmail AND other copyright holders