<my-grid class="grid-overlay"></my-grid>

<style>
  /* 
  Accepts the following CSS variable overrides:
  • --columns = number of columns
  • --gap = amount of space between columns
  • --overlay-color = background color of the overlay
  */
  .grid-overlay {
    /* Setup internal variables with default values */
    --n: var(--columns, 12);
    --g: var(--gap, 16px);
    --c: var(--overlay-color, rgb(255 0 0 / 0.08));

    /* column width = (layout width + gutter) / number of columns - gutter */
    --column-width: calc(((100% + var(--g)) / var(--n)) - var(--g));

    position: relative;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: repeating-linear-gradient(
        to right,
        var(--c),
        var(--c) var(--column-width),
        transparent var(--column-width),
        transparent calc(var(--column-width) + var(--g))
      );
    }
  }

  /* For demontration purposes only, use whatever grid system you'd like */
  my-grid {
    display: block;
    height: 100vh;
    width: 100vw;
  }
</style>