突出显示CSS网格

Question

我有CSS网格：

<div style="display:grid;
            grid-template-columns:repeat(5, 1fr);
            grid-template-rows:repeat(5, 1fr);
            align-items: center;
            justify-items: center;"
     sc-part-of="placeholder rendering"
     class="scEnabledChrome">
</div>

当我在Chrome DevTools中检查网格时，会产生下一个突出显示效果：

如何使用CSS或JavaScript达到类似的效果？ 我希望能够显示/隐藏划分网格的线。

Answer 1

这是一个使用渐变产生类似效果的想法（但不包括破折号）。您只需要调整渐变的值即可使其与重复项相同：

.box {
  height: 200px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  border-top:1px solid;
  border-left:1px solid;
  background: 
   repeating-linear-gradient(to right, transparent 0,transparent calc(100%/5 - 1px),#000 calc(100%/5 - 1px),#000 calc(100%/5)),
   repeating-linear-gradient(to bottom,transparent 0,transparent calc(100%/5 - 1px),#000 calc(100%/5 - 1px),#000 calc(100%/5));
}

<div class="box"></div>

您也可以考虑使用CSS变量来简化此操作：

.box {
  height: 200px;
  display: grid;
  grid-template-columns: repeat(var(--c,5), 1fr);
  grid-template-rows: repeat(var(--r,5), 1fr);
  align-items: center;
  justify-items: center;
  border-top:1px solid;
  border-left:1px solid;
  background: 
   repeating-linear-gradient(to right, transparent 0,transparent calc(100%/var(--c,5) - 1px),#000 calc(100%/var(--c,5) - 1px),#000 calc(100%/var(--c,5))),
   repeating-linear-gradient(to bottom,transparent 0,transparent calc(100%/var(--r,5) - 1px),#000 calc(100%/var(--r,5) - 1px),#000 calc(100%/var(--r,5)));
}

<div class="box"></div>
<div class="box" style="--c:3;--r:4"></div>