如何突出CSS网格 ?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (32)

我有CSS Grid:

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

当我检查ChromeDevTools中的网格时,接下来的突出显示效果是:

如何使用CSS或JavaScript实现类似的效果?我希望有能力显示/隐藏划分网格的线条。

提问于
用户回答回答于

这里有一个想法,使用梯度具有类似的效果(但没有破折号)。只需调整梯度的值,使其与重复相同:

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

扫码关注云+社区

领取腾讯云代金券