KNACSS/sass/base/grillade-grid.scss

/* --------------------------------------- */
/* ==Grillade : ultra light Grid System    */
/* --------------------------------------- */
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
// if you need complex Grid :
//   1- use vanilla CSS Grid Layout spec (perfect for you)
//   2- use Bootstrap (good luck)

// use these variables only for a standalone Grillade
// in KNACSS, you shall modify variables file instead
$tiny    : 480px !default;
$medium  : 768px !default;
$large   : 992px !default;
$cols    : 12 !default;

// classic Grid
[class*=" grillade-"],
[class^="grillade-"] {
  @media (min-width: $tiny) {
    display: grid;

    // gutters
    @if variable_exists(grid-gutters) {
      $gutter: $grid-gutters !global;
    }
    @else {
      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
    }
    @each $affix, $size in $gutter {
      &.has-gutter#{$affix} {
        grid-gap: $size;
      }
    }
  }
}

// autogrid
.autogrillade,
.grillade {
  @media (min-width: $tiny) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    // gutters
    @if variable_exists(grid-gutters) {
      $gutter: $grid-gutters !global;

    } @else {
      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
    }
    @each $affix, $size in $gutter {
      &.has-gutter#{$affix} {
        grid-column-gap: $size;
      }
    }
  }
}

// grid constructor (.grillade-2 to .grillade-$cols)
@for $i from 2 through $cols {
  [class*="grillade-#{$i}"] {
    grid-template-columns: repeat(#{$i}, 1fr);
  }
}

// grid items constructor (.col-1 to .col-$cols, .row-1 to .row-$cols)
@for $i from 1 through $cols {
  [class*="col-#{$i}"] {
    grid-column: auto / span #{$i};
  }

  [class*="row-#{$i}"] {
    grid-row: auto / span #{$i};
  }
}

/* medium intermediate breakpoints */
// -medium-X suffix means "X columns when < large screen"
// example : .grillade-4-medium-2 will be 1 column (< tiny) then 2 columns (< large) then 4 columns
@media (min-width: $tiny) and (max-width: ($large - 1)) {
  @for $i from 1 through 4 {
    [class*="grillade-"][class*="-medium-#{$i}"] {
      grid-template-columns: repeat(#{$i}, 1fr);
    }

    [class*="col-"][class*="-medium-#{$i}"] {
      grid-column: auto / span #{$i};
    }
  }

  [class*="-medium-all"] {
    grid-column: 1 / -1;
  }
}

/* small intermediate breakpoints */
// -small-X suffix means "X columns when < medium screen"
// example : .grillade-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
  @for $i from 1 through 4 {
    [class*="grillade-"][class*="-small-#{$i}"] {
      grid-template-columns: repeat(#{$i}, 1fr);
    }

    [class*="col-"][class*="-small-#{$i}"] {
      grid-column: auto / span #{$i};
    }
  }

  [class*="-small-all"] {
    grid-column: 1 / -1;
  }
}

// grid overall alignment
[class*="-start"] {
  justify-content: start;
}

[class*="-end"] {
  justify-content: end;
}

[class*="-center"] {
  justify-content: center;
}

[class*="-space-between"] {
  justify-content: space-between;
}

[class*="-space-around"] {
  justify-content: space-around;
}

[class*="-space-evenly"] {
  justify-content: space-evenly;
}

// grid order
.item-first {
  order: -1;
}

.item-last {
  order: 1;
}

// grid offset
.grid-offset {
  visibility: hidden;
}

// spanning all columns or rows
.col-all {
  grid-column: 1 / -1;
}

.row-all {
  grid-row: 1 / -1;
}