Grid column overlay

html
<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>