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.
Use columns without gutter by using grid modifier .grid--no-gutter.
<div class="grid grid--no-gutter" style=''>
<div class="grid__col grid__col--sm-12">
<div class="sg-box">first column</div>
</div>
<div class="grid__col grid__col--sm-12">
<div class="sg-box">second column</div>
</div>
</div>
{
"language": "en-US",
"modifier": "grid--no-gutter",
"columns": [
{
"class": "grid__col--sm-12",
"text": "first column"
},
{
"class": "grid__col--sm-12",
"text": "second column"
}
]
}