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

Question

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

Answer 1

For instance: if one has a 5x5 grid of squares, is the only way to get colored grid lines to fill the grid with 25 elements and apply borders to those same elements?

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

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

Answer 2

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

Answer 3

而不是使用我建议使用 border 和 pseudo-classes 因为如果 "table cells" 的数量不规则，你最终会得到难看的颜色"table".

末尾的填充单元格

如果你想在 "table cells" 之间使用边框并且你的单元格数量并不总是相同，你可以这样做（这个例子也适用于 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>

Answer 4

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

.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>

这对我有用。

Answer 5

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

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

Answer 6

这不可能，但只需在级联中设置边框即可：这会影响文本和 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>

使用outline，位置不变：

.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>

Answer 7

您也可以选择忽略网格间隙并使用基础 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>

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

Answer 8

有一个解决方法：在每列中使用伪 :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;
}

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

CSS Grid: Is it possible to apply color to grid gaps?

css

css-grid