An Introduction to Gridset

How to get started using Gridset on your site and realise the full potential of your layouts.

What is a grid set?

Simply, a grid set is a set of grids that can be used on any project. You may have different grids within a set that apply to a mobile, tablet, desktop site layout, for example, or you may have a set of three grids that just apply to a desktop layout. Your grid sets can be managed in the app, and each can be exported as PNGs or CSS for use with your HTML. As Gridset grows, we hope to provide sets in any format you may need.

What types of grids can I build?

Building sets for your projects is simple, but you can make your grids as complicated as you like. Gridset gives you the power to quickly create asymmetric grids (where each column is not of an even width), ratio-based grids (where each column width is derived from a base ratio, like the golden ratio 1:1.618…), and compound grids (where you use two or more overlaid grids). Or you can build a completely bespoke array of columns. Every grid build with Gridset is completely fluid and ready for your responsive sites.

How is a grid set used?

Gridset will deliver your grids when and wherever you need them. You can output PNGs of each grid to use in any raster-based graphic program such as Adobe Photoshop or Fireworks. The PNGs are also handy to print out for quick layout sketches. Gridset gives you a few options for generating your grids in CSS too, for quick development or even production sites:

Quick Prototyping Links

Get a jumpstart on your HTML prototypes by grabbing an embedded CSS link that will serve up your grids directly to your site, immediately. Add the overlay script to your HTML get a heads-up display of your grids in place on your site.


If you are working locally or are worried about intermittent connections to, you can download all of your CSS (along with your PNGs and other goodies). We also provide Sass functions and mixins to help you build custom layout CSS fast and efficiently.

Cheat Sheets

If you want to roll your own custom CSS, you can pull up the cheat sheets for your grid and quickly find any measurement you need for building your site or prototype.

Get started building a grid set ]