<div class="outer-container">
  
  <h2>Basic (12 column)</h2>
  
  <h2>Nested grids</h2>


  
  
  <h3>Collapsed grid containers</h3>

  <div class="grid-container">

    <div class="grid-column grid-column--6">

      <div class="grid-container grid-collapse">

        <div class="grid-column grid-column--1-of-2">
          <code>@include grid-column(1 of 2);</code>
        </div>

        <div class="grid-column grid-column--1-of-2">
          <code>@include grid-column(1 of 2);</code>
        </div>

      </div>

    </div>

    <div class="grid-column grid-column--6">

      <div class="grid-container grid-collapse">

        <div class="grid-column grid-column--3-of-5">
          <code>@include grid-column(3 of 5);</code>
        </div>

        <div class="grid-column grid-column--2-of-5">
          <code>@include grid-column(2 of 5);</code>
        </div>

      </div>

    </div>

  </div>
  
</div>

@import "neat@2.*";

body {
  margin: 0;
  font-size: 20px;
  font-family: monospace;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.outer-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px 0;
  background-color: darkseagreen;
}

.grid-container {
  
  // all grid-columns should be wrappeed in a container element.
  @include grid-container;
  
  &.grid-collapse {
    
    // this removes the outer margins of the container, 
    // for use with nested grids.
    @include grid-collapse;
  }
}

.grid-column {
  
  background-color: tomato;
  height: 200px;
  margin-bottom: 20px;
  
  .grid-column {
    background-color: orange;
  } 
  
  &.grid-column--12 {
    @include grid-column;
  }
  
  &.grid-column--6 {
    @include grid-column(6);
  }
  
  &.grid-column--4 {
    @include grid-column(4);
  }
  
  &.grid-column--1-of-2 {
    @include grid-column(1 of 2);
  }
  
 
  &.grid-column--3-of-5 {
    @include grid-column(3 of 5);
  }
  
  &.grid-column--2-of-5 {
    @include grid-column(2 of 5);
  }
}

.box {
  background-color: lavender;
  padding: 20px;
}