CSS网格：不完整行的边框

Question

有没有办法让CSS网格（display: grid）在所有项目周围都有1px边框并填充不完整的行？设置background-color的方法似乎不是一个可行的解决方案。

我的目标是在代码片段中有一个没有灰色区域的网格，其中缺少项目，网格线总是一直延伸到表格中。这应该适用于每行的项目的响应组合。

几乎看起来不需要特殊的伪类，因为没有下面的项目，并且没有项目在右边使这个工作在响应式布局中，因为last-of-type关于网格的信息太少而无法使用它造型。

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