grid-scss

Mixins for CSS grids

Install npm

npm i maduser-grid-scss

Using flex-box:

4 columns of equal size with children elements

  .container {
    @include grid-cols(4);
  }

3 columns with specific sizes

  .container {
    @include grid-flex;
  }

  .column-left {
    @include grid-col(25%);
  }

  .column-center {
    @include grid-col(50%);
  }
  
  .column-right {
    @include grid-col(25%);
  }

Using rows and cols, no flex:

6 columns of equal size

  .container {
    @include grid-container;
  }

  .row {
    @include grid-row;
  }

  .column {
    @include grid-col(16.6666%);
  }