在 CSS Grid 中为网格间隙设置不同的长度

Question

我正在使用 CSS 网格创建布局，并且我希望每行之间有不同的空间。

我可以通过在每个元素上使用边距来很好地创建布局，但这会掩盖代码的简单性。是否有任何网格技巧我可以做到这一点，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>
  <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>

Answer 1

我可以做任何网格技巧来实现这一点，grid-row-gap 似乎只取一个值，它用于所有行。

使用grid-row-gap、grid-column-gap 和grid-gap 属性，您不能对不同的间隙应用不同的宽度。如您所述，每个轴只能使用一个值：一个用于行间距，另一个用于列间距 (spec)。

您可以使用边距（或填充）来显示额外的空间，但这实际上并不会改变间隙的宽度。它只会扩展行。

在下面的示例中（基于您的代码），grid-row-gap 设置为 20 像素。网格项目具有您设置的 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>