grid.sass

$gridPad: 20px
$gridColLen: 12

.g-row
  display: flex
  flex-wrap: wrap
  width: calc(100% + #{$gridPad})
  margin-left: -#{$gridPad / 2}
  margin-right: -#{$gridPad / 2}
.g-col
  display: flex
  align-content: flex-end
  width: 100% 
  margin-left: #{$gridPad / 2} 
  margin-right: #{$gridPad / 2} 

@for $i from 1 through $gridColLen
  $w: 100% / $gridColLen * $i
  .g-col-#{$i}
    width: calc(#{$w} - #{$gridPad})

+max-screen(940px)
  @for $i from 1 through $gridColLen
    $w: 100% / $gridColLen * $i
    .g-col-md-#{$i}
      width: calc(#{$w} - #{$gridPad})

$gridPad: 10px

+max-screen(640px)
  .g-row
    width: calc(100% + #{$gridPad})
    margin-left: -#{$gridPad / 2}
    margin-right: -#{$gridPad / 2}
  .g-col
    margin-left: #{$gridPad / 2} 
    margin-right: #{$gridPad / 2} 
  @for $i from 1 through $gridColLen
    $w: 100% / $gridColLen * $i
    .g-col-xs-#{$i}
      width: calc(#{$w} - #{$gridPad})