html - 将背景颜色应用于网格之间的间隙

Question

我正在尝试为框/网格之间的间隙提供背景颜色。这是我的代码：

.box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.box {
  grid-gap: 10px;
  background-color: grey;
}

.box div {
  border: 1px solid #444;
  min-height: 100px;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
  <div>thirteen</div>
</div>

有人可以建议什么是正确的方法吗？

标签： htmlcsscss-grid

Answer 1

添加背景

.box div{       
    border: 1px solid #444;
    min-height: 100px;
    background:#fff;
}

https://jsfiddle.net/lalji1051/1x4n0ody/1/