我正在使用 CSS 网格创建布局，并且希望每行之间有不同的空间。
我可以通过在每个元素上使用边距来很好地创建布局，但这种方式掩盖了代码的简单性。有什么网格技巧可以实现这一点吗？grid-row-gap似乎只采用一个值，该值用于所有行。
我想要实现的是这样的布局：
https://jsfiddle.net/8swzgk0b/1/ 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>
<div class="row-3"></div>
<div class="row-3"></div>
<div class="row-4"></div>
<div class="row-4"></div>
<div class="row-4"></div>
</div>
我可以做任何网格技巧来实现这一目标吗？grid-row-gap似乎只采用一个值，该值用于所有行。
随着grid-row-gap, grid-column-gap and grid-gap属性，您不能对不同的间隙应用不同的宽度。正如您所指出的，每个轴只能使用一个值：一个用于行间隙，另一个用于列间隙（spec https://www.w3.org/TR/css3-grid-layout/#gutters).
您可以使用边距（或填充）来显示额外的空间，但这实际上并不会改变间隙的宽度。它仅扩展行。
在下面的示例中（基于您的代码），grid-row-gap设置为 20px。网格项目有margin-bottom您设置的变体。请注意如何grip-row-gap尺寸永远不会改变。所有更改都发生在行内部。
.grid {
display: grid;
grid-template-columns: auto 25% 25%;
grid-template-rows: auto auto auto;
grid-column-gap: 40px;
grid-row-gap: 20px;
}
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>
<div class="row-3"></div>
<div class="row-3"></div>
<div class="row-4"></div>
<div class="row-4"></div>
<div class="row-4"></div>
</div>
如果您想在行之间应用不同大小的间隙，请考虑使用实际行来完成作业：
现在，行之间的间隙有自己独特的高度。
.grid {
display: grid;
grid-template-columns: auto 25% 25%;
grid-template-rows: 80px 5px 80px 10px 80px 30px 80px 20px; /* adjusted */
grid-column-gap: 40px;
}
.wide {
grid-column: 1 / span 3;
background: #838383;
}
.row-2 {
grid-row-start: 3;
background: green;
}
.row-3 {
grid-row-start: 5;
background: blue;
}
.row-4 {
grid-row-start: 7;
background: red;
}
<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>
<div class="row-3"></div>
<div class="row-3"></div>
<div class="row-4"></div>
<div class="row-4"></div>
<div class="row-4"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
