Full featured flexbox grid in 40 lines of SASS
Star
Why use it ?
Lightweight
Lightweight
Fast and concise code. 40 lines the standard version and 24 the nano one.
Lightweight
Easy to use
No fancy intallation is needed to get it running. Just copy-paste and you are done.
Lightweight
Responsive
It’s built with flexbox and is fully responsive meaning that your web page will look great on all devices.
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%)
.container
  margin: 0 auto
.row
  display: flex
  flex-wrap: wrap
  > div[class*='w-']
    padding: 6px 4px
    box-sizing: border-box
  > div:not([class*='w-'])
    flex: 1
    padding: 6px 4px
  @for $i from 1 through 12
    .w-#{$i}
      flex-basis: $i / 12 * 100%
    @each $sizeLabel, $value in (sm 480px, md 768px, lg 992px, xl 1200px)
      .w-#{$sizeLabel}-#{$i}
        flex-basis: 100%
@each $sizeLabel, $value in (sm 480px, md 768px, lg 992px, xl 1200px)
  @media only screen and (min-width: #{$value})
    @for $i from 1 through 12
      .row > .w-#{$sizeLabel}-#{$i}
        flex-basis: $i / 12 * 100%
    .container
      width: if(index((sm 480px, md 768px, lg 992px, xl 1200px),$sizeLabel $value) > 2, $value, 99%)
  • No offset classes
  • No alignment classes
Container
<div class="container">
</div>
The grid
Equal widths
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
Custom widths
w-1
w-11
w-2
w-10
w-3
w-9
w-4
w-8
w-5
w-7
w-6
w-6
w-7
w-5
w-8
w-4
w-9
w-3
w-10
w-2
w-11
w-1
<div class="row">
    <div class="w-1">w-1</div>
    <div class="w-11">w-11</div>
</div>
Responsive classes
w-4
w-4
w-4
w-sm-4
w-sm-4
w-sm-4
w-md-4
w-md-4
w-md-4
w-lg-4
w-lg-4
w-lg-4
w-xl-4
w-xl-4
w-xl-4
w-sm-1 w-lg-4 w-xl-3
w-sm-5 w-lg-2 w-xl-3
w-sm-5 w-lg-2 w-xl-3
w-sm-1 w-lg-4 w-xl-3
Keyword Size Class name
sm
> 480px .w-sm-*
md
> 768px .w-md-*
lg
> 992px .w-lg-*
xl
> 1200px .w-xl-*
<div class="row">
     <div class="w-md-4">w-md-4</div>
     <div class="w-md-4">w-md-4</div>
    <div class="w-md-4">w-md-4</div>
</div>
Offset
w-11 w-offset-1
w-10 w-offset-2
w-9 w-offset-3
w-8 w-offset-4
w-7 w-offset-5
w-6 w-offset-6
w-3 w-offset-2
w-3 w-offset-2
w-md-3 w-offset-md-2
w-sm-6 w-offset-sm-2 w-md-3 w-offset-md-3 w-lg-2 w-offset-lg-1
w-sm-3 w-offset-sm-2 w-md-3 w-offset-md-3 w-lg-5 w-offset-lg-4
<div class="row">
    <div class="w-11 w-offset-1"><div class="box">w-11 w-offset-1</div></div>
</div>
<div class="row">
    <div class="w-md-3 w-offset-md-2"><div class="box">w-md-3 w-offset-md-2</div></div>
</div>
Alignment
Vertical alignment
w-3
w-3 align-start
w-3 align-center
w-3 align-end
 <div class="row">
    <div class="w-3">w-3</div>
    <div class="w-3 align-start">w-3 align-start</div>
    <div class="w-3 align-center">w-3 align-center</div>
    <div class="w-3 align-end">w-3 align-end</div>
</div>
Horizontal alignment
row align-start
w-2
w-2
w-2
row align-center
w-2
w-2
w-2
row align-end
w-2
w-2
w-2
row space-around
w-2
w-2
w-2
row space-between
w-2
w-2
w-2
<div class="row align-center">
    <div class="w-2">w-2</div>
    <div class="w-2">w-2</div>
    <div class="w-2">w-2</div>
</div>