CSS网格:不完整行的边框

Question

是否有一种方法可以使CSS网格(display: grid)在所有项周围有一个1px边框，并填充不完整的行？设置background-color的方法似乎不是一个可行的解决方案。

我的目标是创建一个没有代码片段中灰色区域的网格，在代码片段中缺少项，并且网格行始终贯穿整个表。这应该适用于每一行项目的响应组合。

似乎需要特殊的伪类，因为在下面没有项，而在正确的中没有项，以响应性布局的方式工作，因为最后类型的网格信息太少，无法用于样式化。

​

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #d4d4d4;
  grid-gap: 1px;
  border: 1px solid #d4d4d4;
}

.grid > div {
  padding: 15px;
  text-align: center;
  background-color: white;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

​

Answer 1

你应该申请

• 网格容器和网格项的相同background-color
• 具有负边距的网格项的右边框和底部边框(这将由网格间隙来补偿)。

演示：

​

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: white;
  grid-gap: 1px;
  border: 1px solid #d4d4d4;
}

.grid > div {
  padding: 15px;
  text-align: center;
  background-color: inherit;
  border-right: inherit;
  margin-right: -1px;
  border-bottom: inherit;
  margin-bottom: -1px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

​