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!

Unweave

Generators that don't allow every possible input are the ones I don't use. – Pigment

@Radek S, So in other words you don't use generators? – Gehlbach

I'm not quite sure but I see gutters as a static space between columns. What I mean is that unlike margins that are relational to the column itself, a gutter is a stationary object (or black hole or gap) that properly defines well-laid-out distances between neighboring columns. – Dobbs

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...

Scoff

I feel that this answer doesn't fully satisfy the op's question #1. Are gutters managed via margin or not? – Liftoff

@Liftoff as bigmattyh says - "Gutters have absolutely nothing to do with CSS per se…". The CSS properties used to create them is up to implementor. – Scoff

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.

Nial