sq-grid.scss

/*!
 * SQ-UI (https://github.com/SQ-UI/sq-grid)
 * Copyright 2018 Plamena Radneva
 * Copyright 2018 SQ-UI
 * Licensed under MIT (https://github.com/SQ-UI/sq-grid/blob/master/LICENSE)
 */
@import 'mixins';
$columns: 12;
$columnGap: 10px;
$rowGap: 20px;

.sq-grid {
  //if the browser supports either css grid or flexbox
  @supports (display: grid) or (display: flex) {
    &.css-grid {
      @include css-grid($columns, $columnGap, $rowGap);

      &.auto-col-width {
        @include css-grid('auto', $columnGap, $rowGap);
      }
    }

    &.css-flexbox {
      //by default, the flexbox grid consist of 12 columns
      @include flexbox-grid($columns, $columnGap, $rowGap);

      //if the user adds an "auto-col-width" class
      //then the columns will have dynamic width
      //determined by the browser
      &.auto-col-width {
        @include flexbox-grid('auto', $columnGap, $rowGap);
      }
    }
  }

  //if the user is unfortunate and still lives in the 90's
  @supports not ((display: grid) and (display: flex)) {
    @include float-grid($columns, $columnGap, $rowGap);
  }
}