CSS网格:是否可以将颜色应用于网格间隙？
有没有办法在CSS网格布局模块中设置不仅仅是网格间隙宽度的样式？我在文档中找不到任何关于它的内容,但是人们倾向于认为有可能因为网格间隙在许多设计中都有颜色.如果不可能,有解决方法吗？
小智 11
我将边框颜色作为背景颜色添加到网格中，并向所有网格项目添加背景颜色。
.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>这对我有用。
例如:如果一个人拥有5x5的正方形网格,那么获得彩色网格线以填充25个元素的网格并将边框应用于这些相同元素的唯一方法是什么？
您可以这样做,但网格边框不会像表格边框与border-collapse属性一样折叠,与网格间隙不同,它们将与内部边框一起应用于网格的边界,这可能是不可取的.另外,如果您有grid-gap声明,则间隙将分隔您的网格项边框,就像border-collapse: separate表格边框一样.
grid-gap是用于间隔网格项目的惯用方法,但它并不理想,因为网格间隙只是:空白空间,而不是物理框.为此,为这些间隙着色的唯一方法是将背景颜色应用于网格容器.
而不是使用上面的解决方案,我建议使用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>