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

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.