CSS Grid：不完整行的边框答案

【问题标题】：CSS Grid: Border for incomplete rowsCSS Grid：不完整行的边框
【发布时间】：2018-03-05 03:46:25
【问题描述】：

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

我的目标是在代码 sn-p 中创建一个没有灰色区域的网格，其中缺少项目并且网格线始终延伸到整个表格。这应该适用于每行项目的响应组合。

似乎下面没有项目和右边没有项目需要特殊的伪类才能使其在响应式布局中工作因为 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>

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：