Abstract row component of flexbox based grid system

scss

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col();

    &--1-3 {
      @include _lattice__col(1, 3);
    }
  }
}

html

<div class="c-lattice">
  <div class="c-c-lattice__col c-row__c-lattice--1-3">
    ...
  </div>
</div>

Abstract column element of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col();

    &--1-3 {
      @include _lattice__col(1, 3);
    }
  }
}

html

<div class="c-lattice">
  <div class="c-c-lattice__col c-row__c-lattice--1-3">
    ...
  </div>
</div>

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col(1, 2);

    @include _media-min(lg) {
      @include _lattice__col--width(1 / 3 * 100%);
    }
  }
}