CSS Grid：不完整行的边框

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>