Draw the columns of a grid in the background

grid.scss

.container-grid {
  --columns: 6;
  --gap: 1.5rem;

  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-column-gap: var(--gap);

  @media only screen and (min-width: 600px) {
    --columns: 12;
  }

  --column-color: rgba(255, 0, 0, 0.07);
  --transparent: rgba(0, 0, 0, 0);

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;

    --column-width: calc(
      (100% - (var(--columns) - 1) * var(--gap)) / var(--columns)
    );

    background-image: repeating-linear-gradient(
      to right,
      var(--column-color) 0,
      var(--column-color) var(--column-width),
      var(--transparent) var(--column-width),
      var(--transparent) calc(var(--column-width) + var(--gap))
    );

    background-size: 100% 100%;
  }
}