突出显示CSS网格 [英] Highlight CSS Grid

问题描述

我有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中检查网格时，会产生下一个突出显示效果:

when I inspect grid in Chrome DevTools I have next highlighting effect:

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

How can I achieve similar effect using CSS or JavaScript? I want to have ability to show/hide lines that divide grid.

推荐答案

这里是使用渐变产生类似效果的想法(但不包括破折号).您只需要调整渐变的值即可使其与重复项相同:

Here is an idea using gradient to have similar effect (but without the dashes). You simply need to adjust the values of the gradient to make it the same as the repeat:

.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变量来简化此操作:

You may also consider CSS variable to make it easy:

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

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