CSS & PSD Grid Layout Generators

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.

Responsify-1

Modular Grid Pattern

The tool for quick design modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other.

Modular-2

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.

Gridulator-3

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.

GridCalc-4

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.

Gridpak-5

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.

Grid-Calculator-6

Tiny Fluid Grid

Simple tool that generates code for fluid grid-based layouts.

Tiny-Fluid-Grid-7

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.

Grid-Designer-8

Variable Grid System

Base on the 960.G grid system, you can easly setup your grid and get the css file according to it.

heroku-9

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.