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

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属性，您不能对不同的间隙应用不同的宽度。正如您注意到的，每个轴只能使用一个值:一个用于行间隙，另一个用于列间隙(等级库)。

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

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

​