在CSS网格列和行之间添加规则

Question

是否有css网格属性来添加网格列之间的规则(垂直线),以及网格行之间的规则(水平线),以相同的方式或类似方式,列规则有效吗？

我在规范中看不到它,但也许我错过了一些东西,或者有些东西正在开发中？

Answer 1

另一种选择是考虑网格和网格单元的背景颜色。如果您可以为网格的背景着色并向元素应用中性白色，则网格背景将渗透到grid-gap. 这有效地让您获得网格规则。

例子：

.grid-container {
  background-color: #111; /* color of the line between cells */
  display: grid;
  grid-gap: 1px; /* size of the line between cells */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(min-content, max-content);
  padding: 1px; /* size of the line around the grid */
}

.grid-item {
  background-color: #fff; /* cells need a bg color for this to work */
  min-height: 100px;
}

<section class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</section>

缺点是，您仍然需要根据您的内容在网格周围进行大量手动填充调整，如果您的网格包含大量内容，背景将会渗透。

但是，对于简单的网格，这种方法比我想象的更有效。

Answer 2

是否存在css网格属性，以相同或相似的方式在网格列之间添加规则（垂直线），并在网格行之间添加规则（水平线）？

没有

没有这样的属性。

CSS网格行和列完全是虚拟的，仅指示浏览器布局引擎各自区域的起点和终点。