3.2.3 #Layout.grid.nesting Nesting
To nest your content with the default grid, add a new sb-grid and set of sb-col-* columns within an existing sb-col-* column.
Browser support: IE10+, Safari9+, Firefox30+, Chrome30+
Level 1: .sb-col-8
Level 2: .sb-col-s-8 .sb-col-m-7 .sb-col-l-6
Level 2: .sb-col-s-4 .sb-col-m-5 .sb-col-l-6
Level 1: .sb-col-4
Markup
<div class="sb-grid">
<div class="sb-tile sb-padding sb-col-8">
<p class="sb-margin-bottom">Level 1: .sb-col-8</p>
<div class="sb-grid">
<div class="sb-tile sb-padding sb-col-s-8 sb-col-m-7 sb-col-l-6">
Level 2: .sb-col-s-8 .sb-col-m-7 .sb-col-l-6
</div>
<div class="sb-tile sb-padding sb-col-s-4 sb-col-m-5 sb-col-l-6">
Level 2: .sb-col-s-4 .sb-col-m-5 .sb-col-l-6
</div>
</div>
</div>
<div class="sb-tile sb-padding sb-col-4">
Level 1: .sb-col-4
</div>
</div>
Source: layout/_layout.scss, line 427