ZURB CSS Grid Builder helps you start using CSS grids

CSS Grid Builder is a neat tool for Web designers (from ZURB, the company behind Notable). So what's a CSS grid?

CSS Grids are often used by Web designers to control page layout and position elements in a somewhat sensible fashion. Grid Builder lets you specify what sort of grid you would like to have and spits out just the CSS you need.

The top section of the window has a simple form to fill out that designates how many columns you want, what their width should be, what the gutter width is, and the expected total screen width. There's also a "Presets" list box with just one preset available; I don't really get the point of having just one, but okay.

As you set parameters, you can watch as a mock-up to the right of the form automatically updates to reflect your selections. Error checking is rudimentary at best; you can easily have your layout overflow the window, but I guess this is to be expected with such a simple tool.

While there is a button captioned "Get the Code!," all it does is scroll down the page to the section entitled "CSS Code." There, you can see the code for your layout with some really nice syntax highlighting. The CSS actually updates live, as you fill out the form, so there is no need to click the button.

All in all, it's quite a neat tool for developers and especially for those who are just starting out with CSS grids.

Tags: ajax, css, grid, tool, webdesign, webdevelopment, zurb