13 Excellent Tools and Systems for CSS Grid Based Layouts

A good grid can be a strong foundation for any design. Using grids got its start in print design, but has made it’s way over to the web. There are several advantages to using grids in web design, but primarily they help achieve structure and consistency in layouts. If you have yet to start using grids in your web design projects, but want to get started…we’re here to help. In this post, we’ve rounded up 13 excellent tools and systems for CSS grid based layouts.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

CSS Grid Builder is another tool that lets you design your own grid by specifying body width and number of columns. This one even lets you enter content for the header and footer. Once you’re done you can easily copy the generated code.

The 1 KB CSS Grid is a simple, lightweight approach that doesn’t require a PhD. When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. Its convenient row and column syntax provide all the necessary scaffolding.

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

Grid Calculator allows you to choose the font size you are going to use, and then select the number of columns, column width, and gutter width based on that base font size. As you fiddle with the dimensions, the total width is dynamically updated, so you can check that you haven’t gone over that magic 1024px.

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools JavaScript library. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.