Generate Column and Rows

cssgrid-columandrow.scss

/// Add Gap between the boxes
///
/// @group core - cssgrid
///
/// @param   {list}    $boxes - List with box sizes
/// @param   {string}  $gap - Optional column gap
@function box-gap($boxes, $gap) {
  $box: ();

  @for $i from 1 through length($boxes) {
    $box: append($box, nth($boxes, $i), space);

    // Adding Gap Between
    @if $gap > 0 {
      // Not last Loop
      @if $i != length($boxes) {
        $box: append($box, $gap, space);
      }
    }
  }

  @return $box;
}

/// To build Grid Template Columns with optional gap
///
/// @group core - cssgrid
///
/// @param   {string}  $gap - Optional column gap
/// @param   {list}    $columns - Columns sizes
///
/// @require {function} box-gap
///
/// @example scss - scss
///   .test {
///     @include grid-columns(10px 250px 1fr 50px 100px);
///   }
@mixin grid-columns($gap, $columns) {
  /* autoprefixer: off */
  grid-template-columns: $columns;
  /* autoprefixer: on */
  @if $gap > 0 {
    grid-column-gap: $gap;
  }

  .old-grid-spec & {
    -ms-grid-columns: box-gap($columns, $gap);
  }
}

/// To build Grid Template Rows with optional gap
///
/// @group core - cssgrid
///
/// @param   {string}  $gap - Optional row gap
/// @param   {list}    $rows - Rows sizes
///
/// @require {function} box-gap
///
/// @example scss - scss
///   .test {
///     @include grid-rows(10px 1fr);
///   }
@mixin grid-rows($gap, $rows) {
  /* autoprefixer: off */
  grid-template-rows: $rows;
  /* autoprefixer: on */
  @if $gap > 0 {
    grid-row-gap: $gap;
  }

  .old-grid-spec & {
    -ms-grid-rows: box-gap($rows, $gap);
  }
}