How to highlight CSS grid cells?

Question

Consider a CSS grid where rows can have variable heights:

<

Answer 1

Create elements for each grid cell:

const grid = document.getElementsByClassName("grid")[0];

const rows = 4;
const cols = 8;

for (let r = 1; r <= rows; r++) {
    for (let c = 1; c <= cols; c++) {
        const h = document.createElement("div");
        h.classList.add("highlight");
        h.style.gridRow = r;
        h.style.gridColumn = c;
        grid.appendChild(h);
    }
}

(This could also be done server side)

And style them:

.highlight {
  z-index: 1;
  border: 1px dashed blue;
  background: #0000FF44;
}

To show them only on hover use:

.highlight {
    display: none;
}

.grid:hover > .highlight {
    display: block;
}