3.2.2 #Layout.grid.gutter Gutter

Toggle example guides Toggle HTML markup

Gutter modifier classes. Use sb-grid--gutter-#{gutter} to set the desired space between columns.
If you would also like a vertical gutter, include sb-grid--gutter-vertical, it will match your horizontal gutter in size.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

Default styling
.sb-col-4
.sb-col-4
.sb-col-4
.sb-grid--gutter-0
No gutter
.sb-col-4
.sb-col-4
.sb-col-4
.sb-grid--gutter-s
Small gutter
.sb-col-4
.sb-col-4
.sb-col-4
.sb-grid--gutter-l
Large gutter
.sb-col-4
.sb-col-4
.sb-col-4
Markup
<div class="sb-grid [modifier class]">
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
</div>
Source: layout/_layout.scss, line 261