Visual grid for grid layout

css

/* Grid */

.grid::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    pointer-events: none;

    --grid-color: rgb(255 0 0 / 0.1);
    --grid-sides: 16px;
    --grid-gutter: 16px;
    --grid-columns: 4;
    --grid-column-width: calc(
        (100% - var(--grid-gutter) * var(--grid-columns)) / var(--grid-columns)
    );

    border: solid transparent;
    border-width: 0 calc(
        var(--grid-sides) - var(--grid-gutter) / 2
    );

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

    background-repeat: no-repeat;
}

@media (min-width: 736px) {
    .grid::before {
        --grid-sides: 24px;
        --grid-columns: 8;
    }
}

@media (min-width: 1008px) {
    .grid::before {
        --grid-sides: 32px;
        --grid-columns: 12;
    }
}