Truth is that many designers are so busy that they just don’t have time to create the layout they truly want, leaving many dissatisfied with the end result or even worse reusing and being “stuck” with old layouts. So here are useful tools for generating CSS and PSD grid layouts in no time.
Responsify.it
Responsify.it lets you quickly and effortlessly generate your own responsive grid framework and customise it as you see fit, all through an easy to use interface. It is ideal for creating a solid, standard’s compliant foundation, from which you can build upon.
Modular Grid Pattern
The tool for quick design modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other.
Gridulator
Gridulator – a free web application that calculates multi-column grids for all your pixel-based web layout needs. Just set up your layout width and the number of columns you want and get all the possible grids that have round integers, with inline previews and full-size PNGs, ready for use in your Photoshop.
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.
Gridpak
Gridpak is a great starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.
Grid Calculator
A simple tool for web and print designers to calculate your grids. Download your grid as illustrator or photoshop files with a pre-made guides ready to go.
Tiny Fluid Grid
Simple tool that generates code for fluid grid-based layouts.
Grid Designer
If you’re familiar with the grid, a bit of design and basic typography, using this script should be pretty easy – most of the functions are pretty self-explanatory. If you’re unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton.
Variable Grid System
Base on the 960.G grid system, you can easly setup your grid and get the css file according to it.