Grid Layout with CSS Variables

css-var-grid.scss

/*
this is the stylesheet to support creating grid layouts in just html.

experimentation in using css variables to create the a grid layout

Usage:

<div style="--grid; --gap:10px">
<div style="--grow">input</div>
<div style="--min-width: 10%">submit</div>
</div>

<div style="--grid; --gap:20px">
<div style="--width: 33.3%">item</div>
<div style="--width: 33.3%">item</div>
<div style="--width: 33.3%">item</div>
<div style="--width: 33.3%">item</div>
<div style="--width: 33.3%">item</div>
</div>
*/

*[style*=--grid] {
  --gap: 0px;

  //min-width: 100%;
  box-sizing: border-box;
  outline: 1px solid red;
  display: flex;
  margin-left: calc(var(--gutter, var(--gap)) * -1);
  margin-bottom: calc(var(--gap-bottom, var(--gap)) * -1);
  flex-wrap: wrap;
  
  > * {
    box-sizing: border-box;
    border-left: var(--gutter, var(--gap)) solid transparent;
    background-clip: padding-box;
    outline: 1px solid green;
    border-bottom: var(--gap-bottom, var(--gap)) solid transparent;
    min-width: 0;
    flex-shrink: 1;
    display: flex;
  }
}
*[style*=--grow] {
   flex-grow: 1;
}
*[style*=--middle] {
   align-items:center;
}
*[style*=--left] {
   margin-left: var(--bp-left, var(--left));
}
*[style*=--width] {
   width: var(--bp-width, var(--width));
}
*[style*=--min-width] {
   min-width: var(--bp-min-width, var(--min-width));
}
*[style*=--max-width] {
   max-width: var(--bp-max-width, var(--max-width));
}



$bpStep: 50;
$bpMin: 300;
$bpMax: 2000;
$bpCount: ($bpMax - $bpMin) / $bpStep;

@for $i from 0 through $bpCount {
  $bp: $bpMin + ($bpStep * $i);

  @media (max-width: #{$bp}px) {
    *[style*=--gap-at#{$bp}] {
      --bp-gap: var(--gap-at#{$bp});
    }
    *[style*=--width-at#{$bp}] {
      --bp-width: var(--width-at#{$bp});
    }
    *[style*=--min-width-at#{$bp}] {
      --bp-min-width: var(--min-width-at#{$bp});
    }
    *[style*=--max-width-at#{$bp}] {
      --bp-max-width: var(--max-width-at#{$bp});
    }
    *[style*=--left-at#{$bp}] {
      --bp-left: var(--left-at#{$bp});
    }
  }
}