CSS Grid：是否可以将颜色应用于网格间隙？答案

【问题标题】：CSS Grid: Is it possible to apply color to grid gaps?CSS Grid：是否可以将颜色应用于网格间隙？
【发布时间】：2018-02-03 16:40:21
【问题描述】：

有没有办法在 CSS 网格布局模块中设置不仅仅是网格间隙宽度的样式？我在文档中找不到任何关于它的信息，但是人们倾向于认为这是可能的，因为在许多设计中网格间隙往往会被着色。如果不可行，是否有解决方法？

【问题讨论】：

网格容器上的背景颜色怎么样？
另外，请发布工作代码，以便我们重现问题。
@Michael_B 重现没有问题；那不是我问的。在我跳入并将自己编码到一个角落之前，我正在尝试制定解决方案。我编辑了问题以包含布局的屏幕截图。
Michael_B 要求提供用于创建布局的现有 HTML 和 CSS。但是，如果它只是一个包含所有必需品的平面网格，那么您的问题应该是不言自明的。
很遗憾，没有，但我发现一个不错的解决方法是设置网格内元素的 background-color 并使用这些元素的 padding-bottom 或 padding-right 分隔它们

标签： css css-grid

【解决方案1】：

有一种解决方法：在每列中使用伪 :after 或 :before 将背景颜色应用于网格间隙。

.grid-column::after {
          position: absolute;
          right: -20px; // grid-gap
          top: 0;
          height: 102px; // grid row height
          width: 20px; // grid-gap
          display: block;
          content: '';
          background-color: black !important;
}

【讨论】：

【解决方案2】：

您也可以选择省略网格间隙并使用底层 div 上的边框，如下所示：

CSS：

.grid {
  display: inline-grid;
  border: red solid;
  width: 200px;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.grid div {
  border: red solid;
}

和 HTML：

<div className="grid">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
</div>

我相信这可以实现您想要实现的目标：

【讨论】：

【解决方案3】：

这是不可能的，只需在级联中设置边框即可：这会影响文本和 div 的位置。

.grids {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: #222;
  height: 326px;
  width: 455px;
  color: white
}

.grids > div {
  border: 4px red solid
}

<div class="grids">

  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  
</div>

使用轮廓，位置不变：

.grids {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: #222;
  height: 326px;
  width: 455px;
  color: white
}

.grids > div {
  outline: 4px red solid;
}

<div class="grids">

  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  <div>f</div>
  
</div>

【讨论】：

【解决方案4】：

在网格上设置背景颜色将为您的间隙着色。例如：

    section {
            display: grid;
            grid-gap: 15px;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            background-color: red;
        }

【讨论】：

【解决方案5】：

我将边框颜色作为背景颜色添加到网格中，并为所有网格项添加背景颜色。

.grid {
  width: 1000px;
  display: grid;
  background: #D7D7D7;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 1px;
}

.grid-item {
  background: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="grid">
    <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>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
  </div>
</body>

</html>

这对我有用。

【讨论】：

【解决方案6】：

而不是使用solution above，我建议将border 与伪类一起使用，因为如果您有不规则数量的“表格单元格”，您最终会在“表格”的末尾出现一个丑陋的彩色填充单元格”。

如果您想在“表格单元格”之间使用边框并且您的单元格数量并不总是相同，您可以执行以下操作（此示例也适用于 flexbox）：

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* with flexbox:
  display: flex;
  flex-wrap: wrap;
  */
}

/* Add border bottom to all items */
.item {
  padding: 10px;
  border-bottom: 1px solid black;
  /* with flexbox:
  width: calc(50% - 21px);
  */
}

/* Remove border bottom from last item & from second last if its odd */
.item:last-child, .item:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

/* Add right border to every second item */
.item:nth-child(odd) {
  border-right: 1px solid black;
}

<div class="wrapper">
  <div class="item">BOX 1</div>
  <div class="item">BOX 2</div>
  <div class="item">BOX 3</div>
  <div class="item">BOX 4</div>
  <div class="item">BOX 5</div>
</div>

【讨论】：

【解决方案7】：

遗憾的是，目前 CSS 网格规范中没有办法设置 grid-gap 的样式。我想出了一个效果很好的解决方案，尽管它只涉及 html 和 css：show border grid lines only between elements

【讨论】：

【解决方案8】：

例如：如果有一个 5x5 的正方形网格，是唯一的方法来获得彩色网格线以用 25 个元素填充网格并将边框应用于这些相同的元素吗？

您可以这样做，但网格边框不会像使用 border-collapse 属性的表格边框那样折叠，并且与网格间隙不同，它们将与内部边框一起应用于网格的周边，这可能不需要。另外，如果您有 grid-gap 声明，则这些间隙将分隔您的网格项目边框，就像 border-collapse: separate 对表格边框所做的那样。

grid-gap 是间隔网格项目的惯用方法，但它并不理想，因为网格间隙就是：空白空间，而不是物理框。为此，为这些间隙着色的唯一方法是将背景颜色应用于网格容器。

【讨论】：

在我看来，一种设置网格线样式的方法，就像使用文本列分隔符一样，将是一个很好的补充。我采用的解决方案是简单地填充充满自动放置空 div 的网格，并带有右边框和下边框。从视觉上看，这是一个完美的解决方案，但是查看 html 并看到 22 个空 div 令人讨厌。