Generated by SassMeister.com.

scss_grid-mixins.css

.all-in-one-grid {
  display: grid;
  grid-template-columns:   300px  300px  300px  300px;
  grid-template-rows:   300px  300px  300px  300px;
  grid-column-start: 1;
  grid-row-start: 3;
  grid-column-end: 1;
  grid-row-end: 4;
}

.parent-grid {
  display: grid;
  grid-template-columns:   300px  300px  300px  300px;
  grid-template-rows:   300px  300px  300px  300px;
}
.parent-grid .child-grid {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-column-end: 1;
  grid-row-end: 4;
}

scss_grid-mixins.scss

// ----
// Sass (v3.4.25)
// Compass (v1.0.3)
// ----

@mixin grid($col: 4, $row: $col, $gWidth: 300px, $gHeight: $gWidth) {
  $space: unquote(" ");
  $templateCols: unquote("");
  $templateRows: unquote("");
  @for $i from 1 through $col {
    $templateCols: $templateCols + $space $gWidth;
  }
  @for $i from 1 through $row {
    $templateRows: $templateRows + $space $gHeight;
  }
  display: grid;
  grid-template-columns: $templateCols;
  grid-template-rows: $templateRows;
  @content
}

@mixin grid-pos($colStart, $colEnd, $rowStart, $rowEnd, $target: '') {
  @if $target != '' {
    #{$target} {
      grid-column-start: $colStart;
      grid-row-start: $rowStart;
      grid-column-end: $colEnd;
      grid-row-end: $rowEnd;
    }
  } @else {
    grid-column-start: $colStart;
    grid-row-start: $rowStart;
    grid-column-end: $colEnd;
    grid-row-end: $rowEnd; 
  }
}

.all-in-one-grid {
  @include grid() {
    @include grid-pos(1, 1, 3, 4);
  }
}

.parent-grid {
  @include grid() {
    @include grid-pos(1, 1, 3, 4, ".child-grid");
  }
}