css - 在 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

Is there any grid trick I can do to achieve this, grid-row-gap only seems to take one value, which it uses for all rows.

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

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

在下面的示例中(基于您的代码)，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>