How to highlight CSS grid cells?
One idea using JS is to read the computed value of grid-template-columns and grid-template-rows in order to create another grid above the one you have filled with placeholder elements.
Here is a basic example. You should update the values on hover since getComputedStyle will return pixel values:
var grid = document.querySelector('.grid');
var overlay = document.createElement("div");
overlay.className = 'overlay';
overlay.style.gridTemplateRows = window.getComputedStyle(grid, null).getPropertyValue("grid-template-rows");
overlay.style.gridTemplateColumns = window.getComputedStyle(grid, null).getPropertyValue("grid-template-columns");
grid.appendChild(overlay);
/* Get the number of items*/
var Nc = overlay.style.gridTemplateColumns.split(" ").length;
var Nr = overlay.style.gridTemplateRows.split(" ").length;
/* Create placeholder items*/
for (var i = 0; i < Nc * Nr; i++) {
var d = document.createElement("div");
overlay.appendChild(d);
}
/* Update the values on hover*/
grid.addEventListener('mouseover', function() {
overlay.style.gridTemplateRows = window.getComputedStyle(grid, null).getPropertyValue("grid-template-rows");
overlay.style.gridTemplateColumns = window.getComputedStyle(grid, null).getPropertyValue("grid-template-columns");
}).grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-column-gap: 16px;
grid-row-gap: 8px;
position: relative;
overflow:hidden;
}
.first {
grid-column: 1 / 3;
background-color: #ccc;
}
.second {
grid-column: 5 / 6;
grid-row: 2 / 5;
background-color: #ccc;
height: 120px;
}
.overlay {
position: absolute;
display: grid;
top: 0;
left: 0;
right: 0;
bottom: 0;
grid-gap: inherit;
opacity: 0;
pointer-events: none;
}
.overlay>* {
border: 1px dotted;
background: rgba(0, 125, 0, 0.4);
}
.grid:hover .overlay {
opacity: 1;
}<div class="grid">
<div class="first">First</div>
<div class="second">Second</div>
</div>