如何突出显示CSS网格单元? [英] How to highlight CSS grid cells?

问题描述

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

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>

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

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

如何使用CSS(或JavaScript(如果需要))实现类似的网格覆盖效果?

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

注释:

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

推荐答案

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

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.

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

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>

这篇关于如何突出显示CSS网格单元?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！