Meet Gridset

Gridset gives you all the flexibility you need to create complex grids in an easy-to-use interface

Gridset interface

Gridset for design

Gridset enables designers to set up creative layout grids for the web, without having to worry about the calculations.

  • Create simple or complex custom grid systems for your design in minutes
  • Tailor specific grids across breakpoints you define for multiple screen sizes
  • Save, reuse and manage your grid sets for future use
  • Gridset generates PNG, CSS and cheat sheet assets to improve your workflow and collaboration

Gridset for prototyping

For prototyping, Gridset provides everything you need – all possible column configurations of the grids in your set.

  • Set up and manage grid sets containing all the grids for your site or app
  • Define as many breakpoints as you need for your targeted devices
  • Rapidly develop and change layouts as your app’s requirements change

Gridset for production

Gridset provides all the measurements you’ll need to integrate your grids with your existing CSS.

  • Generate cheat sheets displaying all possible calculations
  • Sass functions for clean, semantic CSS. Less mixins coming soon
  • Generate measurements to use in your own code and work around limitations.

Why not give Gridset a go on your next project? Sign up for a 30-day free trial

More features

Responsive grids made easy

Effective layouts don’t rely on one grid that’s squeezed or stretched for different devices. Gridset lets you tailor specific grids across breakpoints you define, letting your content shine at any screen size. No other responsive grid system affords you this much control.

Custom grids

Most grid systems for the web box you in with a prescribed number of columns of the same width, meaning you have to fake the grid system you really need. The best grid systems don’t work that way. Gridset gives you complete control over columns to create the grid your content needs – asymmetric, compound, ratio-based – no faking required.

Save and reuse

Gridset isn’t just another grid generator. Grids you create using Gridset are yours to reuse as often as you need them. Experiment with different options for a project, or reuse a grid as the basis for something new. When a client changes their requirements midstream, making incremental changes to a saved grid is easy.

Team access

Gridset plays well with teams by letting you share grids easily with colleagues, wherever they are. Collaborate on designs, avoid disruption when team members are away - even invite clients in to see the grid design process as it happens. You can also share your sets publicly to get feedback.

Presets

Tucked inside every Gridset account are several useful example grids. Learn how to create and use classic grids based on the work of Karl Gerstner and Romek Marber, among others. Also included are presets to produce beautiful ratio-based grids, expressing well-known proportions like the golden section and thirds, as well as a series of classical ratios.

Layout helpers

Gridset generates useful assets to smooth the transition between the browser and your graphics applications. As well as a quick and easy embeddable CSS file for prototyping and testing, Gridset also creates PNG files of your entire grid set, so you can view and work with your grids inside your design tool of choice.

Who's using Gridset?

Even when the confines of a CMS restrict your ability to edit HTML, Gridset can help. To work with CERN’s Drupal theme, Gridset generated the grid measurements used to create Sass mixins for integration with the site. Gridset can work with a wide variety of CMS platforms, making your life easier.

Alfresco offers enterprise level document and content management. The company’s corporate site was redesigned, making the most of compound grids in Gridset to create a complex yet clean layout. The grid was then tailored to suit different screen sizes for a beautiful responsive experience.

Oxford Brookes University needed a responsive site that retained the existing look and feel. Gridset helped convert the site’s uneven columnar layout to a complementary asymmetric grid, resulting in a fully responsive site that retains the intent of the original design.

The WorldSkills London site had to be delivered quickly to meet an event deadline. Gridset’s strength in rapid prototyping was invaluable, allowing fast generation of prototypes that provided a solid foundation for building the production site.