如何突出显示 CSS 网格单元格？

Question

考虑一个 CSS 网格，其中行可以具有可变高度：

.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>

当鼠标悬停在 DevTools 中的网格元素上时，Chrome 会像这样可视化网格：

如何使用 CSS（或 JavaScript，如果需要）实现类似的网格叠加效果？

注意事项：

1. 应突出显示所有网格单元格，即使网格项不占用它们。
2. 网格单元格可以具有可变高度（在上面的示例中，第一行高度小于其余行）。

Answer 1

使用 JS 的一个想法是读取 grid-template-columns 和 grid-template-rows 的计算值，以便在已填充占位符元素的网格之上创建另一个网格。

这是一个基本示例。您应该更新悬停时的值，因为getComputedStyle 将返回像素值：

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>

Answer 2

为每个网格单元创建元素：

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

（这也可以在服务器端完成）

并设置它们的样式：

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

仅在悬停时显示它们：

.highlight {
    display: none;
}

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