Copy environment

Grid

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.

Vertical Align

Vertical alignment can be either adjusted separately column by column using grid__col--top-#, grid__col--middle-#, grid__col--bottom-# (example below) or by whole group of columns by using grid modifier .grid--top-#, .grid--middle-#, .grid--bottom-#.

Preview 
<div class="grid " style='height: 150px;'>
    <div class="grid__col grid__col--sm-8 grid__col--top--sm">
        <div class="sg-box">top</div>
    </div>
    <div class="grid__col grid__col--sm-8 grid__col--middle-sm">
        <div class="sg-box">middle</div>
    </div>
    <div class="grid__col grid__col--sm-8 grid__col--bottom-sm">
        <div class="sg-box">bottom</div>
    </div>
</div>
 
{
  "language": "en-US",
  "style": "height: 150px;",
  "columns": [
    {
      "class": "grid__col--sm-8 grid__col--top--sm",
      "text": "top"
    },
    {
      "class": "grid__col--sm-8 grid__col--middle-sm",
      "text": "middle"
    },
    {
      "class": "grid__col--sm-8 grid__col--bottom-sm",
      "text": "bottom"
    }
  ]
}