Gutters

Between each column or row, you’ll find gutters. They are also called grid gaps in web development. Gutters are the spaces between columns and rows. They separate content and provide white space within your design, giving it room to breathe. Elements may bridge gutters when they occupy multiple columns or rows, but as a general rule, an element should not end in a gutter.

To maintain a visual balance, gutters should always be equal between columns or rows. There are 3 gutter sizes: compact, cozy, and comfortable, each roomier than the previous one. You might be familiar with these terms from the display options in Gmail’s interface. Be careful using compact gutters, as they can add tension to your design.