<div class="grid grid-gap-sm">
  <div class="child col-start-5 col-end-9"></div>
  <div class="child col-start-1 col-4"></div>
  <div class="child col-4"></div>
  <div class="child col-start-1 col-2"></div>
  <div class="child col-start-5 col-8"></div>
  <div class="child col-4"></div>
  <div class="child col-2 col-start-11"></div>
  <div class="child col-start-5 col-4"></div>
  <div class="child col-start-9 col-4"></div>
  <div class="child"></div>
</div>

// ⚡️ Flash Grid - Lightweight CSS Grid System by CodyHouse
// 📦 https://github.com/CodyHouse/flashgrid

// demo
body {
  padding: 1rem;
}

.child {
  background-color: violet;
  height: 4rem;
}

// grid system
$grid-columns: 12 !default;

.grid, [class*="grid-auto-"] {
  display: grid;
  grid-gap: var(--grid-gap, 0);
}

.grid {
  --grid-cols: #{$grid-columns};
  grid-template-columns: repeat(var(--grid-cols), 1fr);

  > * {
    grid-column-end: span var(--grid-cols);
  }
}

.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { // auto-sized grid
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
}

.grid-auto-xs { --col-min-width: 8rem; }
.grid-auto-sm { --col-min-width: 10rem; }
.grid-auto-md { --col-min-width: 15rem; }
.grid-auto-lg { --col-min-width: 20rem; }
.grid-auto-xl { --col-min-width: 25rem; }

.grid-auto-cols { // cols = same size
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs, 0.125rem); }
.grid-gap-xxxs  { --grid-gap: var(--space-xxxs, 0.25rem); }
.grid-gap-xxs   { --grid-gap: var(--space-xxs, 0.375rem); }
.grid-gap-xs    { --grid-gap: var(--space-xs, 0.5rem); }
.grid-gap-sm    { --grid-gap: var(--space-sm, 0.75rem); }
.grid-gap-md    { --grid-gap: var(--space-md, 1.25rem); }
.grid-gap-lg    { --grid-gap: var(--space-lg, 2rem); }
.grid-gap-xl    { --grid-gap: var(--space-xl, 3.25rem); }
.grid-gap-xxl   { --grid-gap: var(--space-xxl, 5.25rem); }
.grid-gap-xxxl  { --grid-gap: var(--space-xxxl, 8.5rem); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl, 13.75rem); }

@for $i from 1 through $grid-columns {
  .col-#{$i}  { grid-column-end: span #{$i}; }
  .col-start-#{$i} { grid-column-start: #{$i}; }
  .col-end-#{$i+1} { grid-column-end: #{$i+1}; }
}

.col-start { grid-column-start: 1; }
.col-end { grid-column-end: -1; }

// breakpoints
$breakpoints: (
  xs: 32rem, 
  sm: 48rem,
  md: 64rem,
  lg: 80rem,
  xl: 90rem
) !default;

@mixin breakpoint($breakpoint) {
  @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
}

@include breakpoint(xs) {
  .grid-auto-xs\@xs { --col-min-width: 8rem; }
  .grid-auto-sm\@xs { --col-min-width: 10rem; }
  .grid-auto-md\@xs { --col-min-width: 15rem; }
  .grid-auto-lg\@xs { --col-min-width: 20rem; }
  .grid-auto-xl\@xs { --col-min-width: 25rem; }

  .grid-auto-cols\@xs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xs  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xs { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xs { grid-column-end: #{$i+1}; }
  }

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

@include breakpoint(sm) {
  .grid-auto-xs\@sm { --col-min-width: 8rem; }
  .grid-auto-sm\@sm { --col-min-width: 10rem; }
  .grid-auto-md\@sm { --col-min-width: 15rem; }
  .grid-auto-lg\@sm { --col-min-width: 20rem; }
  .grid-auto-xl\@sm { --col-min-width: 25rem; }

  .grid-auto-cols\@sm { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@sm  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@sm { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@sm { grid-column-end: #{$i+1}; }
  }

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

@include breakpoint(md) {
  .grid-auto-xs\@md { --col-min-width: 8rem; }
  .grid-auto-sm\@md { --col-min-width: 10rem; }
  .grid-auto-md\@md { --col-min-width: 15rem; }
  .grid-auto-lg\@md { --col-min-width: 20rem; }
  .grid-auto-xl\@md { --col-min-width: 25rem; }

  .grid-auto-cols\@md { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@md  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@md { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@md { grid-column-end: #{$i+1}; }
  }

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

@include breakpoint(lg) {
  .grid-auto-xs\@lg { --col-min-width: 8rem; }
  .grid-auto-sm\@lg { --col-min-width: 10rem; }
  .grid-auto-md\@lg { --col-min-width: 15rem; }
  .grid-auto-lg\@lg { --col-min-width: 20rem; }
  .grid-auto-xl\@lg { --col-min-width: 25rem; }

  .grid-auto-cols\@lg { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@lg  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@lg { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@lg { grid-column-end: #{$i+1}; }
  }

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

@include breakpoint(xl) {
  .grid-auto-xs\@xl { --col-min-width: 8rem; }
  .grid-auto-sm\@xl { --col-min-width: 10rem; }
  .grid-auto-md\@xl { --col-min-width: 15rem; }
  .grid-auto-lg\@xl { --col-min-width: 20rem; }
  .grid-auto-xl\@xl { --col-min-width: 25rem; }

  .grid-auto-cols\@xl { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xl  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xl { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xl { grid-column-end: #{$i+1}; }
  }

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