Basic Grid 

@import "01-layout/show_grid";

<div class="sg-sample">
  <div class="grid">
    <div class="grid-col w-1of1">
      <div class="sg-show-grid">
        1/1</div>
    </div>
  </div>
  <div class="grid">
    <div class="grid-col w-1of2">
      <div class="sg-show-grid">
        1/2</div>
    </div>
    <div class="grid-col w-1of2">
      <div class="sg-show-grid">
        1/2</div>
    </div>
  </div>
  <div class="grid">
    <div class="grid-col w-1of3">
      <div class="sg-show-grid">
        1/3</div>
    </div>
    <div class="grid-col w-1of3">
      <div class="sg-show-grid">
        1/3</div>
    </div>
    <div class="grid-col w-1of3">
      <div class="sg-show-grid">
        1/3</div>
    </div>
  </div>
  <div class="grid">
    <div class="grid-col w-1of4">
      <div class="sg-show-grid">
        1/4</div>
    </div>
    <div class="grid-col w-1of4">
      <div class="sg-show-grid">
        1/4</div>
    </div>
    <div class="grid-col w-1of4">
      <div class="sg-show-grid">
        1/4</div>
    </div>
    <div class="grid-col w-1of4">
      <div class="sg-show-grid">
        1/4</div>
    </div>
  </div>
  <div class="grid">
    <div class="grid-col w-1of5">
      <div class="sg-show-grid">
        1/5</div>
    </div>
    <div class="grid-col w-1of5">
      <div class="sg-show-grid">
        1/5</div>
    </div>
    <div class="grid-col w-1of5">
      <div class="sg-show-grid">
        1/5</div>
    </div>
    <div class="grid-col w-1of5">
      <div class="sg-show-grid">
        1/5</div>
    </div>
    <div class="grid-col w-1of5">
      <div class="sg-show-grid">
        1/5</div>
    </div>
  </div>
  <div class="grid">
    <div class="grid-col w-1of6">
      <div class="sg-show-grid">
        1/6</div>
    </div>
    <div class="grid-col w-1of6">
      <div class="sg-show-grid">
        1/6</div>
    </div>
    <div class="grid-col w-1of6">
      <div class="sg-show-grid">
        1/6</div>
    </div>
    <div class="grid-col w-1of6">
      <div class="sg-show-grid">
        1/6</div>
    </div>
    <div class="grid-col w-1of6">
      <div class="sg-show-grid">
        1/6</div>
    </div>
    <div class="grid-col w-1of6">
      <div class="sg-show-grid">
        1/6</div>
    </div>
  </div>
  <div class="grid">
    <div class="grid-col">
      <div class="sg-show-grid">Without width classes</div>
    </div>
    <div class="grid-col">
      <div class="sg-show-grid">grid columns</div>
    </div>
    <div class="grid-col">
      <div class="sg-show-grid">will have auto widths</div>
    </div>
    <div class="grid-col">
      <div class="sg-show-grid">and wrap</div>
    </div>
    <div class="grid-col">
      <div class="sg-show-grid">and expand as needed. See: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, obcaecati, corporis, quasi, distinctio sunt perspiciatis natus aspernatur earum dicta impedit sint accusantium alias voluptatum velit adipisci aut nemo
        nulla labore.</div>
    </div>
  </div>
</div>

Grids always consist of a wrapper (.grid) which contains only grid columns (.grid-col).

You can add width classes (w-XofY means width: X/Y of the wrapper) to the grid columns to set its widths. Without them, the width will depend on the content.

Nested Grid 

@import "01-layout/show_grid";

<div class="sg-sample">
  <div class="grid">
    <div class="grid-col w-3of4">
      <div class="sg-show-grid">
        <b>3/4 item</b> with content and nested grid
        <div class="grid">
          <div class="grid-col w-1of3">
            <div class="sg-show-grid">1/3</div>
          </div>
          <div class="grid-col w-1of3">
            <div class="sg-show-grid">1/3</div>
          </div>
          <div class="grid-col w-1of3">
            <div class="sg-show-grid">1/3</div>
          </div>
          <div class="grid-col w-1of3">
            <div class="sg-show-grid">1/3</div>
          </div>
          <div class="grid-col w-1of3">
            <div class="sg-show-grid">1/3</div>
          </div>
          <div class="grid-col w-1of3">
            <div class="sg-show-grid">1/3</div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-col w-1of4">
      <div class="sg-show-grid">1/4</div>
    </div>
  </div>
</div>

You can nest grids inside of each other by inserting new .grid wrappers with .grid-cols.

Responsive Grid 

@import "01-layout/show_grid";

<div class="sg-sample">
  <div class="grid">
    <div class="grid-col w-1of4 w-1of2-md">
      <div class="sg-show-grid">w-1of4 w-1of2-md
        <br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto sapiente cumque provident in laboriosam dicta fugit veritatis voluptate quibusdam cum.
      </div>
    </div>
    <div class="grid-col w-1of4 w-1of2-md">
      <div class="sg-show-grid">w-1of4 w-1of2-md</div>
    </div>
    <div class="grid-col w-1of4 w-1of2-md w-1of1-sm">
      <div class="sg-show-grid">w-1of4 w-1of2-md w-1of1-sm</div>
    </div>
    <div class="grid-col w-1of4 w-1of2-md w-1of1-sm">
      <div class="sg-show-grid">w-1of4 w-1of2-md w-1of1-sm
        <br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
    <div class="grid-col w-1of2 w-1of1-sm">
      <div class="sg-show-grid">w-1of2 w-1of1-sm</div>
    </div>
    <div class="grid-col w-1of2 w-1of1-sm">
      <div class="sg-show-grid">w-1of2 w-1of1-sm</div>
    </div>
  </div>
</div>

Multi line grid columns only need one wrapper, not one for each line, and can contain different amount of content. this is important responsive design, as you can see in the example.

Append size suffixes to the width classes to target widths:

  • -xs: max. 479px
  • -sm: max. 719px
  • -md: max. 979px
  • -lg: min. 1280px

Per default, columns are top-aligned, but they can also be aligned to middle, bottom or baseline.

Semantic Grid 

@import "app";

.my-wrapper {
  @extend %grid;
}
.my-main,
.my-sidebar {
  @extend %grid-col;
}
.my-main {
  width: 70%;
}
.my-sidebar {
  width: 30%;
}


@import "01-layout/show_grid";

.sg-show-grid {
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}

<div class="sg-sample">
  <div class="my-wrapper">
    <div class="my-main">
      <div class="sg-show-grid">
        <h1 class="h4">My Main</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, praesentium, nisi, beatae dolorum cum eaque quidem doloremque harum at debitis repellat laboriosam quaerat aliquid incidunt accusamus. Facere, accusamus similique impedit.</p>
      </div>
    </div>
    <div class="my-sidebar">
      <div class="sg-show-grid">
        <h2 class="h4">My Sidebar</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>