CSS 网格：不完整行的边框

Question

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

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

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

CSS 网格：不完整行的边框

CSS Grid: Border for incomplete rows

html

css

css-grid