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.
Add specific gutters on certain sides to elements with .grid__col--top-gutter-#, .grid__col--right-gutter-#, .grid__col--bottom-gutter-# and .grid__col--left-gutter-#
<div class="grid grid--equalheight" style=''>
<div class="grid__col grid__col grid__col--xs-8 grid__col--top-gutter-xs-2 grid__col--left-gutter-xs-2">
<div class="sg-box">column with top and left gutter</div>
</div>
<div class="grid__col grid__col grid__col--xs-8 grid__col--right-gutter-xs-2 grid__col--left-gutter-xs-2">
<div class="sg-box">long column with gutter with right and left gutters, lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae,
rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste.</div>
</div>
</div>
{
"language": "en-US",
"modifier": "grid--equalheight",
"columns": [
{
"class": "grid__col grid__col--xs-8 grid__col--top-gutter-xs-2 grid__col--left-gutter-xs-2",
"text": "column with top and left gutter"
},
{
"class": "grid__col grid__col--xs-8 grid__col--right-gutter-xs-2 grid__col--left-gutter-xs-2",
"text": "long column with gutter with right and left gutters, lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste, recusandae, rerum necessitatibus adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti fuga nostrum soluta totam sit magnam esse aliquid nisi, corrupti itaque, officiis minus aperiam eos iste."
}
]
}