Grid
Here are some options.
None-responsive:
The grid system is based on fractions. You can specify a column width by adding a class of
.column__c-of-12; c is any number between 1 and 12.
Responsive:
There are 4 options for a responsive grid.
Use column without any modifier for mobile size up to small.
small: this is for small devices. You set using the brakpoint mixin. This has 12 columns.
EG: .column__6-of-12--small This will give a 50% element in the small size breakpoint
medium: this is for medium devices. You set using the brakpoint mixin. This has 12 columns.
large: this is for small devices. You set using the brakpoint mixin. This has 12 columns.
<div class="grid">
<div class="column column__12-of-12"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__12-of-12--small column__6-of-12--medium column__6-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__12-of-12--small column__6-of-12--medium column__6-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
<div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
<div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
</div>