- Set an element as a container by using the
grid
class. - Declare columns using BEM syntax (
grid__col--{width}
). - You're all done!
- You need to use block-level elements when declaring containers and columns.
- White space between columns needs to be commented out in your markup.
- To nest columns, simply use the
grid
class on each parent column. - Keep your grid abstracted by using dedicated elements to avoid style conflicts.
<div class="grid">
<div class="grid grid__col--67">
<div class="grid__col--50">
…
</div><!--
--><div class="grid__col--50">
…
</div>
</div><!--
--><div class="grid__col--33">
…
</div>
</div>