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

问题描述 投票：0回答：10

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

css css-grid
10个回答
24
投票

遗憾的是，目前 CSS 网格规范中无法设置样式 

grid-gap
。我想出了一个效果很好的解决方案，尽管只涉及 html 和 css：仅在元素之间显示边框网格线

19
投票

而不是使用上面的解决方案我建议使用

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>

10
投票

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

您可以这样做，但网格边框不会像具有 

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

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

10
投票

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

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

这对我有用。

2
投票

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

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;
}
1
投票

如果您事先不知道容器中有多少列，我会这样做（适用于任意数量的列和任何大小。此外，此方法不会设置空项目的样式）： 

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, auto));
  grid-auto-rows: minmax(80px, auto);
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

.grid-item {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

 /* not required */
.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background:#f5f5f5;
}
<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
  <div class="grid-item">Item 10</div>
  <div class="grid-item">Item 11</div>
<div>

0
投票

有一个办法：

.container{
    background: white;
}
.wrapper {
    gap: 1px;
    background: red;
}
.wrapper .child {
    background: white;
}
-1
投票

您还可以选择忽略网格间隙并使用底层 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>

我相信这实现了你想要实现的目标：

-2
投票

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

    section {
            display: grid;
            grid-gap: 15px;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            background-color: red;
        }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.