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.

Preview 
<div class="grid " style=''>
    <div class="grid__col grid__col--sm-12">
        <div class="sg-box">1/2 sm</div>
    </div>
    <div class="grid__col grid__col--sm-12">
        <div class="sg-box">1/2 sm</div>
    </div>
    <div class="grid__col grid__col--sm-8">
        <div class="sg-box">1/3 sm</div>
    </div>
    <div class="grid__col grid__col--sm-8">
        <div class="sg-box">1/3 sm</div>
    </div>
    <div class="grid__col grid__col--sm-8">
        <div class="sg-box">1/3 sm</div>
    </div>
    <div class="grid__col grid__col--sm-12 grid__col--md-6">
        <div class="sg-box">1/2 sm, 1/4 md</div>
    </div>
    <div class="grid__col grid__col--sm-12 grid__col--md-6">
        <div class="sg-box">1/2 sm, 1/4 md</div>
    </div>
    <div class="grid__col grid__col--sm-12 grid__col--md-6">
        <div class="sg-box">1/2 sm, 1/4 md</div>
    </div>
    <div class="grid__col grid__col--sm-12 grid__col--md-6">
        <div class="sg-box">1/2 sm, 1/4 md</div>
    </div>
</div>
 
{
  "language": "en-US",
  "columns": [
    {
      "class": "grid__col--sm-12",
      "text": "1/2 sm"
    },
    {
      "class": "grid__col--sm-12",
      "text": "1/2 sm"
    },
    {
      "class": "grid__col--sm-8",
      "text": "1/3 sm"
    },
    {
      "class": "grid__col--sm-8",
      "text": "1/3 sm"
    },
    {
      "class": "grid__col--sm-8",
      "text": "1/3 sm"
    },
    {
      "class": "grid__col--sm-12 grid__col--md-6",
      "text": "1/2 sm, 1/4 md"
    },
    {
      "class": "grid__col--sm-12 grid__col--md-6",
      "text": "1/2 sm, 1/4 md"
    },
    {
      "class": "grid__col--sm-12 grid__col--md-6",
      "text": "1/2 sm, 1/4 md"
    },
    {
      "class": "grid__col--sm-12 grid__col--md-6",
      "text": "1/2 sm, 1/4 md"
    }
  ]
}