Grids

Stop using bootstrap

just for its grid system

Bootstrap vs Yours

0.5kb

86.3kb

32 LoC.

8309 LoC

1.2s

0.007s

  $columns: 4; // Amount of columns per row

Define the amount of columns

your grid will have

  %grid {
    display: flex;
    flex-flow: row wrap;
 
    > * {
      min-width: 100% / $columns;
      transition: all ease-out .75s;
    }
  }

Grid container styles

  @mixin col($cols, $padding-v:false, $padding-h:false) {
    $offset: 0%;
 
    @if $padding-v {
      padding-bottom: #{$padding-v};
      padding-top: #{$padding-v};
    }
 
    @if $padding-h {
      $offset: #{$padding-h * 2};
  
      padding-left: #{$padding-h};
      padding-right: #{$padding-h};
    }
 
    @if $cols {
      width: calc(#{100 / $cols}% - #{$offset});
    } @else {
      width: calc(#{100 / $columns}% - #{$offset});
    }
  }

Define the columns mixin

  .target {
    @extend %grid;
 
    > li {
      @include col(null, 10px, 10px);
    }
 
    > li:nth-child(3) {
      @include col(2);
    }
 
    > li:nth-child(4) {
      @include col(1);
    }
  }

Using the grid

Example available on codepen.