13 Excellent Tools and Systems for CSS Grid Based Layouts

By / Apr 30, 2010 / Tools
shares

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.

#grid

grid layout

#grid is a little tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.

Gridmaker

grid layout

Gridmaker is a handy tool for creating grid templates for use in Photoshop. There’s also a plugin.

960 Grid System

grid layout

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.

YUI: CSS Grid Builder

grid layout

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.

1 KB CSS Grid

grid layout

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.

netProtozo: Grid Generator

grid layout

Grid Generator allows you to design your own grid by specifying the usual parameters like column width, gutter width, etc. You can then download grab the css or a png of the grid.

Blueprint

grid layout

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.

Typogridphy

grid layout

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

The Golden Grid

grid layout

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites.

YAML

grid layout

“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

grid layout

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.

Gridr Buildrrr

grid layout

Gridr Buildrrr is a useful tool to help you layout your own grids.

Fluid 960 Grid System

grid layout

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.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

24 Comments

  1. Kalvster
    April 30, 2010

    I’ve been starting to use grid frameworks more. It’s quite a time-saver that produces great results!

    Reply
  2. cssfaves.com
    April 30, 2010

    thanks for this article. i have many impressive and effective live examples in my gallery:)

    Reply
  3. Ted Thompson
    April 30, 2010

    Great list of resources. Thanks for sharing!

    Reply
  4. Jordan Walker
    April 30, 2010

    Real nice list of resources for grid based systems.

    Reply
  5. Chris Mower
    April 30, 2010

    I’ve been working on better understanding the different grid systems out there, this is a nice resource for that, thanks. :)

    Reply
  6. Damian Smith
    April 30, 2010

    Grid systems can be really great to use, I started designing sites just by placing navigation here, icons there and a bit of flash where ever i thought it looked good!

    Then I started using grid systems and I started finding that my sites worked so much better, you could read through the content easier, everything stood out in its own place and the site just looked right. Where as before to a designer the sites didn’t flow as well.

    I would highly recommend using some of these systems, all work great but suit different people. I prefer just having a saved psd with all the grids set out then I will decide on columns etc and go from there.

    Reply
  7. shevaa | WebDesignersBlog
    April 30, 2010

    Thanks for the excellent article… nice stuff.. i like it..

    Reply
  8. Rachel
    April 30, 2010

    Wow extremely nice.Thanks for sharing this article

    Reply
  9. Isra
    April 30, 2010

    Good post! I recommend you csans, another great grid tool.

    Reply
  10. Jayphen
    May 1, 2010

    Do any of these solutions deal well with issues relating to semantics?

    Reply
  11. Daniel Long
    May 1, 2010

    Great list of resources. Have used Grid Generator before but will definitely be giving the others a go. Really useful!

    Reply
  12. Design Manchester
    May 1, 2010

    Great post. All these grid systems look great, I created my own template PSD file which incorporates the 960 grid but also keeps your file layers organised, you can download it here

    http://www.design-manchester.co.uk/web-design-blog/free-resources/free-photoshop-template-for-web-design/

    Reply
  13. Wayne k
    May 1, 2010

    Another great grid layout framework created with simple jQuery:

    Masonry
    http://desandro.com/resources/jquery-masonry/

    Reply
  14. stetro
    May 1, 2010

    I prefer 960.gs
    Thanks for this listing !

    Reply
  15. Lilian
    May 1, 2010

    Wow, thanks for sharing the list of variety of grid tools. It is really useful.

    Reply
  16. CSS Factory
    May 2, 2010

    For me is 960 Grid System. I love the way you can design a layout, and it’s also quick! Anyway, nice collection!

    Reply
  17. Stefan
    May 2, 2010

    Thanks for this article. I like the “Easy front-end framework”. It is really easy. http://easyframework.com

    Reply
  18. esranull
    May 2, 2010

    great stuff thanks for article

    Reply
  19. Chesterfield Web Design
    May 2, 2010

    I didn’t even realise tools like this were available. This will help me out loads for sure. Thank you

    Reply
  20. Lars
    May 5, 2010

    Good collection, I’ve used 960 before and found it pretty easy to work with. 960 is also used in Thematic which I’ve started using as a framework for all new WordPress sites.

    For most things though I prefer coding up my own layouts based on requirements and just make sure they line up in a grid of sorts.

    A couple of really useful tools that aren’t mentioned here are two bookmarklets by Allan Jardine called Grid and Rule. There’s also another called Design that includes both Grid and Rule as well as two more. Just drag it into your browser bookmarks toolbar and click on it whenever you need it, very handy.

    I’ll give some of these CSS grid frameworks a try to see if I can streamline and standardise creating new layouts a bit more.

    Reply
  21. Adam Hermsdorfer
    May 9, 2010

    Great list of grid layouts. I’m a big fan of the 960gs. You can really code clean layouts fast.

    Reply
  22. Website Design
    May 11, 2010

    Nice roundup!

    Reply
  23. Cherai
    May 26, 2010

    Great list!!! Thanks :)

    Reply
  24. Mathew Porter
    May 21, 2013

    Nice list, I like to design my initial desktop layout in a 1200px grid based psd file, then this will scale down to 960px in the browser for desktop resolutions, then creating tablet and mobile based layouts afterwards.

    Reply

Leave a Reply