beta-scss/src/grid.scss

@import "variables";

@each $value in $columns {
  .grid-cols\:#{$value} {
    grid-template-columns: repeat(#{$value}, minmax(0, 1fr));
  }
  .grid-rows\:#{$value} {
    grid-template-rows: repeat(#{$value}, minmax(0, 1fr));
  }
  .col-span\:#{$value} {
    grid-column: span $value / span $value;
  }
  .row-span\:#{$value} {
    grid-row: span $value / span $value;
  }
}

.col-span\:auto {
  grid-column: auto;
}
.col-span\:full {
  grid-column: 1 / -1;
}
.row-span\:auto {
  grid-row: auto;
}
.row-span\:full {
  grid-row: 1 / -1;
}

@each $value in $grid-columns {
  .col-start\:#{$value} {
    grid-column-start: $value;
  }
  .col-end\:#{$value} {
    grid-column-end: $value;
  }
  .row-start\:#{$value} {
    grid-row-start: $value;
  }
  .row-end\:#{$value} {
    grid-row-end: $value;
  }
}

.col-start\:auto {
  grid-column-start: auto;
}
.col-end\:auto {
  grid-column-end: auto;
}
.row-start\:auto {
  grid-row-start: auto;
}
.row-end\:auto {
  grid-row-end: auto;
}

@each $name, $value in $grid-flows {
  .grid-flow\:#{$name} {
    grid-auto-flow: $value;
  }
}

@each $name, $value in $autos {
  .auto-cols\:#{$name} {
    grid-auto-columns: $value;
  }
}

@each $name, $value in $autos {
  .auto-rows\:#{$name} {
    grid-auto-rows: $value;
  }
}