Gridpak is an interactive web application for generating responsive grid layouts very quickly.

The width of the grid, number of columns, column padding and gutter width can all be defined which are standard features we have seen from several other layout generators.

It gets better with the ability of adding breakpoints for responsive outputs. You can change the size of the layout, click "Add break point" and there you have it.

Once you have setup the layout, a custom download is ready which includes:

• a CSS file with all the classes and properties you need to create the responsive grid layout
• a LESS file with much the same information but including variables, mixins and methods to help you.
• an SCSS file like the LESS file, but in SCSS.
• a semi transparent PNG image for each grid you have created to help with your design, or with lining things up in your front end.
• a JavaScript snippet that allows you to toggle an overlay of your grid on and off in any browser using the 'G' key.

Designing grid-based layouts in Photoshop is usually a headache as it takes time to calculate and position many vertical + horizontal guides.

GuideGuide is a free Photoshop plugin which simplifies creating grids in Photoshop with only a few clicks.

After defining a few variables (number of rows/columns, gutter width, etc.), it instantly generates the grid using Photoshop guides. And, for any active selections in the document, the plugin sets the grid within the limits of the selection.

Also, any frequently-used grid settings can be saved for later use.

P.S. Smashing Magazine has a very nice article on the usage details of the plugin.

StackLayout is a CSS framework which supports both fluid and fixed-width layouts.

Compared to many popular grid systems, it only uses 12 class names in total and makes use of inline-block CSS property rather than floats.

Stacks can be nested infinitely which helps creating complicated layouts easily.

The framework has a component (a CSS file) which eases building cross-device compatible versions of websites.

StackLayout is compatible with most of the browsers, few old ones has some issues which can be fixed with the help of the documentation provided.

Modular Grid Pattern is a website which enables you to create customizable grids in several ways.

The first one is a free Adobe Photoshop extension (CS5 compatible) provided which makes creating the grid directly inside the application possible.

Also, there is an online generator where you can mention baseline, gutter, module width/height, number of modules and the width of the layout where the application creates:

• PNG pattern (for GIMP)
• Photoshop pattern
• transparency mask (for Adobe Fireworks)

accordingly.

Flurid is a CSS grid framework which is designed to create cross-browser and fluid interfaces.

Compared to many other fluid grid systems, Flurid doesn't hide pixels in margins but uses overflow: hidden and width: auto properties to get rid of the extra pixels in the last column.

The framework has a very intuitive naming convention and supports nested grids + mixed columns.

There is also an optional Flurid jQuery plugin provided which automatically adds classes for you and makes developing easier.

The Square Grid is a CSS framework which is based on 35 equal-width columns.

It is equipped with a 28px baseline-grid for a smooth vertical rhythm. Each block (DIV) is defined with a margin of 1 square (28px) from the next block and the total width of the grid is 994 pixels.

Besides the CSS file, download package also comes with templates for Photoshop, Illustrator and InDesign + there is a PDF sketch file included.

Tiny Fluid Grid is a CSS grid framework for creating fluid grids easily and instantly.

It is inspired by the 1KB CSS Grid and enables you to customize the output by defining the:

• number of columns
• gutter percentage
• min & max width

with the help of sliders.

Once created, you can preview the grid or download it which includes a demo file with the CSS.

Formee is a CSS framework for easily and quickly creating cross-browser web forms.

It works with the technique provided by Fluid 960 Grid System to compose the form's layout, allowing total flexibility to put it in any website or web system.

The framework fits into any project as it has a structure built around percentage widths which adapts to the space available.

Formee is built with the smallest number of tags possible and it generates semantic forms.

Styling the forms created is not complicated as the framework comes with 2 CSS files: one for the structure and the other for styling.

And, there also some side elements in the package that are widely used with web forms such as message boxes to show errors, warnings and success alerts.

The Grid Accordion is an advanced accordion navigation that is built with jQuery.

It  works similar to most other accordions, only one cell is open at a time and handy for displaying detailed information about the items inside a grid.

The big thing is that the column of the current open cell expands to a reasonable reading width.

The accordion also makes use of CSS3 pseudo class selector :nth-of-type for styling the columns (which you can add extra class names to support non-CSS3-enabled browsers).

There is a beautiful demo provided which you can play with.

Less Framework is a lightweight CSS framework for building flexible multi-column website layouts.

It contains an eight-column grid optimized for a line-height of 24px & a set of typography presets based on the golden ratio which is parallel to the grid’s vertical rhythm.

Web pages created with the framework collapse smartly into a single column in modern browsers & on small screens.

Less Framework uses the HTML5 enabling script by Remy Sharp & optionally there is a JavaScript function provided (requires jQuery) included which mimics the function of min-device-width for browsers that do not support it.