CSS Grid：是否可以将颜色应用于网格间隙？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45884630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Grid: Is it possible to apply color to grid gaps?
提问by Taishi
Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can't find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in many designs. If it is not possible, is there a workaround?
有没有办法在 CSS 网格布局模块中设置不仅仅是网格间隙宽度的样式？我在文档中找不到任何关于它的信息，但是人们倾向于认为这是可能的，因为在许多设计中网格间隙往往是彩色的。如果不可能，是否有解决方法？
采纳答案by eriklharper
Sadly, there is currently no way in the CSS Grid spec to style grid-gap. I came up with a solution that works well though that involves just html and css: show border grid lines only between elements
遗憾的是，目前在 CSS Grid 规范中没有办法对grid-gap. 我想出了一个效果很好的解决方案，尽管它只涉及 html 和 css：仅在元素之间显示边框网格线
回答by BoltClock
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?
例如：如果有一个 5x5 的正方形网格，是否是唯一一种方法可以让彩色网格线用 25 个元素填充网格并将边框应用于这些相同元素？
You could do that, but grid borders do not collapse the same way that table borders can with the border-collapseproperty, and unlike grid gaps they'll be applied to the perimeter of your grid along with the inner borders, which may not be desired. Plus, if you have a grid-gapdeclaration, the gaps will separate your grid item borders much like border-collapse: separatedoes with table borders.
您可以这样做，但网格边框不会像表格边框与border-collapse属性一样折叠，并且与网格间隙不同，它们将与内边框一起应用于网格的周边，这可能是不希望的。另外，如果你有一个grid-gap声明，间隙会像border-collapse: separate表格边框一样分隔你的网格项目边框。
grid-gapis the idiomatic approach for spacing grid items, but it's not ideal since grid gaps are just that: empty space, not physical boxes. To that end, the only way to color these gaps is to apply a background color to the grid container.
grid-gap是间隔网格项目的惯用方法，但它并不理想，因为网格间隙就是这样：空白空间，而不是物理框。为此，为这些间隙着色的唯一方法是将背景颜色应用于网格容器。
回答by Jan F?ssler
Instead to use the solution aboveI recommend to use borderwith pseudo-classes because if you have an irregular amount of "table cells" you will end up with an ugly color filled cell at the end of the "table".
而不是使用上面的解决方案，我建议使用border伪类，因为如果您有不规则数量的“表格单元格”，您最终会在“表格”的末尾得到一个难看的颜色填充单元格。
If you want to use borders between the "table cells" and you have not always the same amount of cells you can do something like this (this example would also work with flexbox):
如果您想在“表格单元格”之间使用边框并且您的单元格数量并不总是相同，您可以执行以下操作（此示例也适用于 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>回答by michael
I added the border color as a background-color to the grid and added a background color to all grid-items.
我将边框颜色作为背景色添加到网格中，并为所有网格项添加了背景色。
.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>This works for me.
这对我有用。
回答by Milan Kosir
Setting background-color on grid will color your gaps. For example:
在网格上设置背景颜色将为您的间隙着色。例如：
section {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-color: red;
}
回答by Skaya
maybe this solution will help you: https://codepen.io/skaya/pen/qBWwMXB
也许这个解决方案会帮助你：https: //codepen.io/skaya/pen/qBWwMXB
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
column-gap: 1px;
row-gap: 1px;
overflow: hidden;
}
.item {
padding: 16px 40px;
box-shadow: 0 0 0 1px #E5E5EA;
}<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
</div>回答by José Mário Silva Júnior
It has been a while, but I managed to make it work: I put a background on my grid container, and a grid gap of the thickness of the border I want to have, theen I put a background color in my items individually:
已经有一段时间了，但我设法让它工作：我在我的网格容器上放置了一个背景，并在我想要的边框厚度上放置了一个网格间隙，然后我在我的项目中单独放置了一个背景颜色：
`.grade {
margin: 20px;
height: 220px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1px;
border-radius: 5px;
background: #DDDDDD;
box-shadow: 0px 0px 10px #DDDDDD;
}
.grade .item {
background: #fff;
}`
my html:
我的html：
`<div class="grade">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>`
回答by ijakparov
.listing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
border-bottom: 0;
}
.listing-grid__item {
box-sizing: border-box;
border-right: 1px solid rgba(41, 57, 81, 0.15);
border-bottom: 1px solid rgba(41, 57, 81, 0.15);
padding: 15px;
}
.listing-grid__item:nth-child(1), .listing-grid__item:nth-child(2), .listing-grid__item:nth-child(3), .listing-grid__item:nth-child(4) {
border-top: 1px solid rgba(41, 57, 81, 0.15);
}
.listing-grid__item:first-child, .listing-grid__item:nth-child(4n+1) {
border-left: 1px solid rgba(41, 57, 81, 0.15);
}
<div class="listing-grid">
<div class="listing-grid__item"></div>
<div class="listing-grid__item"></div>
<div class="listing-grid__item"></div>
<div class="listing-grid__item"></div>
<div class="listing-grid__item"></div>
<div class="listing-grid__item"></div>
</div>
回答by NVRM
It's not possible, but simply by setting a border in cascade: this affects text and divs positions.
这是不可能的，但只需在级联中设置边框：这会影响文本和 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>By using outline, the positions is unchanged:
通过使用大纲，位置不变：
.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>回答by Elias
You can use borders instead of grip or just change background color, if that works.
如果可行，您可以使用边框代替夹点或仅更改背景颜色。
.yourDiv {
border-right: 5px solid rgb(110, 0, 210);
border-top: 10px solid rbg(255, 255, 0);
}
Hope it helps!
希望能帮助到你！
