Choose your flavour

$grid-rows : 12 $sizes : (sm 480px , md 768px , lg 992px , xl 1200px ) $prefix : 'w' $padding : 6px 4px .container margin: 0 auto .row display: flex flex-wrap: wrap > div[class*= '#{$prefix}-' ] padding: $padding box-sizing: border-box > div:not([class*= '#{$prefix}-' ]) flex: 1 padding: $padding @for $i from 1 through $grid-rows .#{ $prefix }-#{ $i } flex-basis: $i / $grid-rows * 100% .#{ $prefix }-offset-#{ $i } margin-left: $i / $grid-rows * 100% @each $sizeLabel , $value in $sizes [class*= '#{$prefix}-offset-#{$sizeLabel}-' ] margin-left: 0 .#{ $prefix }-#{ $sizeLabel }-#{ $i } flex-basis: 100% @each $classLabel , $cssValue in (align-start flex-start, align-center center, align-end flex-end) > div[class*= '#{$prefix}-' ].#{ $classLabel } align-self: $cssValue @each $classLabel , $cssValue in (align-start flex-start, align-center center, align-end flex-end, space-around space-around, space-between space-between) &.#{ $classLabel } justify-content: $cssValue @each $sizeLabel , $value in $sizes @media only screen and (min-width: #{ $value }) @for $i from 1 through $grid-rows .row > .#{ $prefix }-#{ $sizeLabel }-#{ $i } flex-basis: $i / $grid-rows * 100% .row > .#{ $prefix }-offset-#{ $sizeLabel }-#{ $i } margin-left: $i / $grid-rows * 100% .container width: if(index( $sizes , $sizeLabel $value ) > 2 , $value , 99% )