Start by adding an element with a class of .grid. This will create a horizontal block to contain vertical columns. Then add elements with a .grid__col class within that row. Specify the widths of each column with .grid__col--xs-#, .grid__col--sm-#, .grid__col--md-# and .grid__col--lg-# classes. Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. Bare in mind that the layout is mobile-first, it has 24 columns without gutter. You can stack modifiers if you want to achieve different alignment depending on screen size.
Divide the space between (.grid--between-#, example below) or around (grid--around-#) columns.
<div class="grid grid--between-sm" style=''>
<div class="grid__col grid__col--sm-3">
<div class="sg-box">column</div>
</div>
<div class="grid__col grid__col--sm-3">
<div class="sg-box">column</div>
</div>
</div>
{
"language": "en-US",
"modifier": "grid--between-sm",
"columns": [
{
"class": "grid__col--sm-3",
"text": "column"
},
{
"class": "grid__col--sm-3",
"text": "column"
}
]
}