distribution-css

@mixin breakpoint($size) {
  @media only screen and (min-width: $size) {
    @content;
  }
}

$size1: 1em;
$size300: 18.75em;
$size400: 25em;
$size500: 31.25em;
$size800: 50em;
$size1000: 62.5em;
$size1200: 75em;
$size1600: 100em;

.dist-size1- {
  @include breakpoint($size1) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}

.dist-size300- {
  @include breakpoint($size300) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}

.dist-size400- {
  @include breakpoint($size400) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}

.dist-size500- {
  @include breakpoint($size500) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}

.dist-size800- {
  @include breakpoint($size800) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}

.dist-size1000- {
  @include breakpoint($size1000) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}

.dist-size1200- {
  @include breakpoint($size1200) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}

.dist-size1600- {
  @include breakpoint($size1600) {
    @for $i from 0 through 6 {
      &#{$i} {
        display: flex;
        flex-wrap: wrap;

        > * {
          flex-basis: auto;
          max-width: #{(100% / $i)};
          width: #{(100% / $i)};
          flex-grow: 1;
        }
      }
    }
  }
}