Intro
A grid is 3 HTML elements...
<grid>
<row>
<column>
Grid and row divs just need grid and grid__row classes...
<div="grid">
<div class="grid__row">
A column has screen sizes and widths.
$screen-sizes: xs, sm, md, lg
A row can hold 12 columns. A column can be 1 - 12 columns wide.
A column class looks like: grid__col--$screenSize-$width
The below example has 3 column classes per column, so the columns will have different widths at different screen sizes. Resize the window to see the columns respond. Open the markup drop down to see the code.
Example
Markup: grid/basic-usage.html
<div class="grid">
<div class="grid__row">
<div class="grid__col--xs-12 grid__col--sm-3 grid__col--md-2 grid__col--lg-2">
<div class="styleguide__box"></div>
</div>
<div class="grid__col--xs-6 grid__col--sm-6 grid__col--md-8 grid__col--lg-8">
<div class="styleguide__box"></div>
</div>
<div class="grid__col--xs-6 grid__col--sm-3 grid__col--md-2 grid__col--lg-2">
<div class="styleguide__box"></div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-12 grid__col--sm-3 grid__col--md-2 grid__col--lg-2">
<div class="styleguide__box"></div>
</div>
<div class="grid__col--xs-12 grid__col--sm-9 grid__col--md-10 grid__col--lg-10">
<div class="styleguide__box"></div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-10 grid__col--sm-6 grid__col--md-8 grid__col--lg-10">
<div class="styleguide__box"></div>
</div>
<div class="grid__col--xs-2 grid__col--sm-6 grid__col--md-4 grid__col--lg-2">
<div class="styleguide__box"></div>
</div>
</div>
</div>
Source:
grid/_grid-examples.scss, line 1