What's the point of gutters in CSS grid frameworks?

Question

I'm diving into web development and I'm playing with the Blueprint CSS framework, which includes a grid system, and I have a few questions.

1. What's the point of gutters? Surely they're not used to include space between the columns because you can just use the margin CSS property for that, right? Or are gutters just an elegant way to manage margins?
2. I don't want any space between my columns and would like to generate a grid layout that doesn't include gutters, but all the generator tools prevent me from having zero-width gutters. Why is that?
3. It appears the suggested Blueprint CSS generator is no longer supported. Can anyone suggest a Blueprint CSS generator for modifying the grid to include zero-width gutters?

Thanks so much for your wisdom!

Answer 1

The motivation behind a CSS Grid system is to completely automate layout. Gutters are usually desirable because white space between columns makes for better legibility so it makes sense to include them as part of the automation.

A Generator's raison d'être is to relieve you of the slightly tedious calculations necessary to implement them but without the gutters both the math and the css isn't at all complicated.

It should be very straight forward to do a no-gutter grid without a generator. e.g.

( column width X nº of columns ) + left margin + right margin = content width

.span-1 {width:100px}
.span-2 {width:200px}
.span-3 {width:300px}
.span-4 {width:400px}

etc...

Answer 2

Gutters have absolutely nothing to do with CSS per se. They're a design concept from print publishing -- they're meant to provide whitespace between columns, making the content easier to read.

Columns without gutters are very easy to calculate. Just set the same width in pixels to each column.