CSS Grid Design Made Easy

Via ISO50 comes word of an excellent (and free) tool for grid-based CSS layout: Grid Designer 2, by Danish web developer Rasmus Shultz.

For anyone not yet on the grid, here are two nice introductory pieces, some more resources, and a couple of well-known systems.

Grid Designer 2 allows you to mock up a complete grid design online in a single open source script. Incredibly, it’s only three simple steps:

1. Columns

Input the number and width of the desired columns. Use the buttons, or type in numeric values. You can play with the gutters and margins to your heart’s content, while previewing live on screen.

2. Typography

Now it gets fun. Adjust the fonts, styles, leading, spacing, line height and more, again with live preview. Paragraph and H1 through H6 are all available.

3. Export

Are you kidding? Yes, unbelievably, we’re done. Grid Designer outputs the CSS style sheet and an html container, scalable if you wish. Copy it, use it, love it.

I’ve just begun playing with this, but as I’m sure you can tell, I’m pretty impressed. I’m sure the output will require some tweaking unless you want a straight-laced, magazine-style grid.

Also, despite the alert stating “NEW! Now supports designs with spanning columns!” it looks to me like you’d have to add these manually after the fact. If anyone can see that I’m missing something, please let me know.

In any case, Grid Designer 2 gets five stars so far, and I look forward to using it for real very soon. Thanks Rasmus!