3.2.1 #Layout.grid.columns Columns

Toggle example guides Toggle HTML markup

Column classes. Use sb-col-#{i} to set the desired column width.

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

.sb-col-12
.sb-col-10
.sb-col-2
.sb-col-9
.sb-col-3
.sb-col-8
.sb-col-4
.sb-col-7
.sb-col-5
.sb-col-6
.sb-col-6
Markup
<div class="sb-grid">
  <div class="sb-tile sb-padding sb-col-12">
    .sb-col-12
  </div>
  <div class="sb-tile sb-padding sb-col-10">
    .sb-col-10
  </div>
  <div class="sb-tile sb-padding sb-col-2">
    .sb-col-2
  </div>
  <div class="sb-tile sb-padding sb-col-9">
    .sb-col-9
  </div>
  <div class="sb-tile sb-padding sb-col-3">
    .sb-col-3
  </div>
  <div class="sb-tile sb-padding sb-col-8">
    .sb-col-8
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-7">
    .sb-col-7
  </div>
  <div class="sb-tile sb-padding sb-col-5">
    .sb-col-5
  </div>
  <div class="sb-tile sb-padding sb-col-6">
    .sb-col-6
  </div>
  <div class="sb-tile sb-padding sb-col-6">
    .sb-col-6
  </div>
</div>
Source: layout/_layout.scss, line 147