有没有办法将单个grid-row-gap特定大小设置为与网格的其余部分不同？
使用案例:网格的顶行与第二行的间距应小于网格的其余部分,因为它充当标题.
我正在使用CSS网格创建一个布局,我希望每行之间有不同的空间.
我可以通过在每个元素上使用margin来创建布局,但这种模糊了代码的简单性.有没有我可以做到的网格技巧,grid-row-gap只看到一个值,它用于所有行.
我想要实现的是这样的布局:
https://jsfiddle.net/8swzgk0b/1/
.grid {
display: grid;
grid-template-columns: auto 25% 25%;
grid-template-rows: auto auto auto;
width 100%;
margin: 20px;
grid-column-gap: 40px;
/* grid-row-gap: 40px 60px; */
}
div {
background: #838383;
height: 80px;
}
.wide {
grid-column: 1 / span 3;
margin-bottom: 5px;
}
.row-2 {
background: green;
margin-bottom: 10px;
}
.row-3 {
background: blue;
margin-bottom: 30px;
}
.row-4 {
background: red;
margin-bottom: 20px;
}<div class="grid">
<div class="wide"></div>
<div class="row-2"></div>
<div class="row-2"></div>
<div class="row-2"></div>
<div class="row-3"></div> …