突出显示CSS网格
突出显示CSS网格
提问于 2018-08-15 22:06:55
我有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>当我在Chrome DevTools中检查网格时，我有下一个高亮效果：
如何使用CSS或JavaScript实现类似的效果？我想要有能力显示/隐藏划分网格的线。
回答 1
Stack Overflow用户
发布于 2018-08-15 22:31:43
这里是一个使用渐变的想法，以获得类似的效果(但没有破折号)。您只需调整渐变的值，使其与重复相同：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51860302
复制相关文章
相似问题