Creating advanced SASS(SCSS) grid. Code examples

HTML

<div class="row">
  <div class="row__col row__col--xs-1">
    xs-1
  </div>
  <div class="row__col row__col--xs-2">
    xs-2
  </div>
  <div class="row__col row__col--xs-3">
    xs-3
  </div>
  <div class="row__col row__col--xs-6">
    xs-6
  </div>
</div>

<div class="row">
  <div class="row__col row__col--md-1">
    md-4
  </div>
  <div class="row__col row__col--md-4">
    md-4
  </div>
  <div class="row__col row__col--md-4">
    md-4
  </div>
</div>

<div class="row">
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
  <div class="row__col row__col--sm-1">
    sm-1
  </div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}
$margin: 1;
// breakpoints map
$breakpoints: (
  xs: 32rem,
  sm: 48rem,
  md: 72rem,
  lg: 96rem,
  xl: 102rem,
  xx: 120rem
);

// media query mixin
@mixin break($size) {  
  @media (min-width: map-get($breakpoints, $size)) {
    @content;
  }
}

// number of columns variable
$items: 12;

// grid container
.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

// grid item
.row__col {
 margin: 10px;
  
  
  &:nth-child(even) {
    background-color: red;
  }
  
  &:nth-child(odd) {
    background-color: #ddd;
  }
}

// loop over the breakpoints
@each $key, $value in $breakpoints {
  @for $i from 1 through $items {
    .row__col--#{$key}-#{$i} {
      flex: 0 0 100%;
      @include break($key) {
        flex: 0 0 calc(#{$i / $items * 100%} - 20px);
      }
    }
  }
}