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

除了 CSS 网格布局模块中网格间隙的宽度之外，还有其他的样式吗？我在文档中找不到任何关于它的内容，但是有人可能会认为这是可能的，因为网格间隙在许多设计中往往是有颜色的。如果这是不可能的，是否有一个变通方案？

102483 次浏览
小开

例如: 如果有一个5x5的正方形网格，是唯一的方法得到有色网格线填充网格25个元素，并应用边界到这些相同的元素？

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

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

小开
最佳答案

遗憾的是，目前还没有办法在 CSS 网格规范样式 grid-gap。我想出了一个很好的解决方案，虽然只涉及 html 和 css: 只显示元素之间的边框网格线

小开

相反，我建议使用 上述解决方案和伪类一起使用 border，因为如果“表单元格”的数量不规则，那么在“表”的末尾就会出现一个颜色难看的单元格。

enter image description here

如果你想在“表格单元格”之间使用边框，并且你并不总是有相同数量的单元格，那么你可以这样做(这个例子也可以用于 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>

小开

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

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

这对我有用。

小开

在网格上设置背景颜色将填充间隙。 例如:

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

这是不可能的，但只要设置一个级联的边界: 这会影响文本和 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>

小开

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

我相信这能达到你想要的效果:

Image showing grid example

小开

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

如果您事先不知道有多少列将适合您的容器，这是我将如何做到这一点(为任何数目的栏目工作和任何大小。此外，此方法不会设置空项的样式) :

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


提交答案