How do CSS grid systems save time when implementing designs that aren’t grid-based?

Question

What CSS grid systems do quickly which we can't do without them?

I work on freelance projects from various resources and the Photoshop file (PSD) i get are not based on grid or not using same grid width and column, gutters. I'm not in direct communications with designers. I only get design files directly from Clients or other freelancers/sub-contractors. I'm good at making HTML CSS for PSD without using any Grid also with IE compatibility.

These days twitter bootstrap is being popular in community which is based on 940px width grid and other thing too for button, and jquery plugins.

My question is specifically for using grid. How it can reduce our development time without restricting us on anything compare to our usual method, specially when Designer are on remote locations and I'm directly not connected to them and even I can't force them to use any grid based systems. Some clients are asking me to use twitter bootstrap but the design files they give me are not matching with 940px grid.

Answer 1

If the design you’re implementing isn’t based on a layout grid, then a CSS grid system won’t help you at all.

I’ll probably show my lack of design knowledge here, but my understanding is that layout grid specifies a minimum width for layout columns, e.g. 60px, and a width for the gutter (the horizontal space between columns), e.g. 20px. Larger columns are then made up of multiples of the minimum column width and the gutter — e.g. a 4-span column is as wide as four individual layout columns, plus three gutters.

It’s a way to make layouts with different numbers of columns look consistent with each other.

CSS grid systems implement this in CSS for you, so that you don’t have to write any CSS.

• E.g. http://twitter.github.com/bootstrap/scaffolding.html#grid-system

You just apply classes to HTML elements. In the case of Twitter Bootstrap’s CSS grid system, to have a 4-span column and and 8-span column next to each other, you use the following HTML:

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

The <div>s then get the right widths and gutters, and the right combination of float-related code so that they’re laid out as columns. So you get the time savings from not having to write (and debug in various browsers) any layout CSS for individual columns.

But if the design you’re implementing doesn’t use a layout grid, then a CSS grid system won’t help you at all, because you’re not implementing a layout grid.