Examples with blocks in the same size

.col-12
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
  <div class="grid-container">
    <div class="grid-row">
      <div class="col-12">.col-12</div>
    </div>
    <!-- next row -->
    <div class="grid-row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
    <!-- next row -->
    <div class="grid-row">
      <div class="col-4">.col-4</div>
      <div class="col-4">.col-4</div>
      <div class="col-4">.col-4</div>
    </div>
    <!-- next row -->
    <div class="grid-row">
      <div class="col-3">.col-3</div>
      <div class="col-3">.col-3</div>
      <div class="col-3">.col-3</div>
      <div class="col-3">.col-3</div>
    </div>
    <!-- next row -->
    <div class="grid-row">
      <div class="col-2">.col-2</div>
      <div class="col-2">.col-2</div>
      <div class="col-2">.col-2</div>
      <div class="col-2">.col-2</div>
      <div class="col-2">.col-2</div>
      <div class="col-2">.col-2</div>
    </div>
    <!-- next row -->
    <div class="grid-row">
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
      <div class="col-1">.col-1</div>
    </div>
  </div>

Examples with blocks in the different sizes

.col-6
.col-4
.col-2
.col-6
.col-1
.col-3
.col-2
  <div class="gris-container">
    <div class="grid-row">
      <div class="col-6">.col-6</div>
      <div class="col-4">.col-4</div>
      <div class="col-2">.col-2</div>
    </div>
    <!-- next row -->
    <div class="grid-row">
      <div class="col-6">.col-6</div>
      <div class="col-1">.col-1</div>
      <div class="col-3">.col-3</div>
      <div class="col-2">.col-2</div>
    </div>
  </div>

Examples with incomplete rows

.col-6
.col-4
.col-6
.col-4
  <div class="grid-container">
    <div class="grid-row">
      <div class="col-6">.col-6</div>
      <div class="col-4">.col-4</div>
    </div>
    <div class="grid-row">
      <div class="col-3">.col-6</div>
      <div class="col-2">.col-4</div>
    </div>
  </div>

Examples with nested rows

Avoid the addition of margin-bottom by using the class grid-row to a column that contains other grid rows.

.col-6
.col-4
.col-2
.col-6
.col-4
.col-2
  <div class="grid-container">
    <div class="grid-row">
      <div class="col-6 grid-container">
        <div class="grid-row">
          <div class="col-6">.col-6</div>
          <div class="col-4">.col-4</div>
          <div class="col-2">.col-2</div>
        </div>
      </div>
      <div class="col-4 grid-container">
        <div class="grid-row">
          <div class="col-6">.col-6</div>
          <div class="col-4">.col-4</div>
          <div class="col-2">.col-2</div>
        </div>
      </div>
    </div>
  </div>