How to highlight CSS grid cells?

问题

Consider a CSS grid where rows can have variable heights:

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 8px;
}

.first {
  grid-column: 1 / 3;
  background-color: #ccc;
}

.second {
  grid-column: 5 / 6;
  grid-row: 2 / 5;
  background-color: #ccc;
  height: 120px;
}

<div class="grid">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

When hovering on the grid element in DevTools, Chrome visualizes the grid like this:

How could I achieve a similar grid overlay effect using CSS (or JavaScript, if needed)?

Notes:

All grid cells should be highlighted, even if grid items don't occupy them.
Grid cells can have variable heights (in the example above the first row height is smaller than the rest of the rows).

回答1:

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>

回答2:

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;
}

来源：https://stackoverflow.com/questions/59205867/how-to-highlight-css-grid-cells

标签

html

css

css-grid