Simple Grid

simple-grid.scss

@mixin set-basis($width) {
  flex-basis: calc(#{$width});
  max-width: calc(#{$width});
}

.simple-grid {
  display: flex;
  flex-wrap: wrap;
  --padding: 8px;
  justify-content: space-between;

  > .col1,
  > .col2,
  > .col3,
  > .col4,
  > .col5,
  > .col6,
  > .col7,
  > .col8,
  > .col9,
  > .col10,
  > .col11,
  > .col12 {
    flex: 1 0 auto;
    padding: var(--padding);
    box-sizing: border-box;
    @include sm-max {
      @include set-basis(100%);
      padding: var(--padding) 0px;
    }
    &:first-child {
      padding-left: 0px;
    }
    &:last-child {
      padding-right: 0px;
    }
  }

  > .col1 {
    @include md {
      @include set-basis(8.33333333%)
    }
  }
  > .col2 {
    @include md {
      @include set-basis(16.66666667%)
    }
  }
  > .col3 {
    @include md {
      @include set-basis(25%)
    }
  }
  > .col4 {
    @include md {
      @include set-basis(33.33333333%)
    }
  }
  > .col5 {
    @include md {
      @include set-basis(41.66666667%)
    }
  }
  > .col6 {
    @include md {
      @include set-basis(50%)
    }
  }
  > .col7 {
    @include md {
      @include set-basis(58.33333333%)
    }
  }
  > .col8 {
    @include md {
      @include set-basis(66.66666667%)
    }
  }
  > .col9 {
    @include md {
      @include set-basis(75%)
    }
  }
  > .col10 {
    @include md {
      @include set-basis(83.33333333%)
    }
  }
  > .col11 {
    @include md {
      @include set-basis(91.66666667%)
    }
  }
  > .col12 {
    @include md {
      @include set-basis(100%)
    }
  }
}