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

Question

我正在使用CSS Grids创建布局，并希望每一行之间有不同的间距。我可以使用每个元素上的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>
  <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>

- Stephan Olsen

---

我也想要这样。我的布局中所有间隙都很好，除了标题行和下一行之间的间隙。那里的间隙太宽了，边距无法帮助我。 - progonkpa

Answer 1

我可以使用什么网格技巧来实现这个效果？grid-row-gap只能接受一个值，而且该值会应用于所有行。

使用grid-row-gap、grid-column-gap和grid-gap属性时，您不能为不同的间距应用不同的宽度。正如您注意到的那样，每个轴只能使用一个值：行间距和列间距各一个（规范）。

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

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

- Michael Benjamin

---

不错的技巧，不过我认为使用边距会更具审美吸引力。很遗憾你无法为grid-row-gap指定多个值 :/ - Stephan Olsen

Answer 2

我最近遇到了一个问题，想要将列进行配对，并且每对列之间以及每对列内部的间隙都不同。

我不想手动定义列（这将需要删除column-gap），因为需要处理最后一个悬空的“在列对之间”的间隙。

找到了一个更简洁的方法，使用负边距，但这只有在每对中的前导列没有启用overflow: hidden时才可行（如果使用max-content或其他动态宽度，溢出不应该是问题）。

这是演示代码：

.group {  
  display:              grid;
  grid-template-columns:repeat(3, max-content 1fr);
  grid-column-gap:      40px;
  grid-row-gap:         20px;
}

.title {
  margin-right:     -20px;
  width:            100%;
  background-color: #61dafb;
}

.body {
  width:            100%;
  background-color: #61dafb;
}

<div class="group">
    <span class="title">Title</span>
    <span class="body">Body</span>
    <span class="title">Title</span>
    <span class="body">Body</span>
    <span class="title">Title</span>
    <span class="body">Body</span>
    <span class="title">Title</span>
    <span class="body">Body</span>
    <span class="title">Title</span>
    <span class="body">Body</span>
    <span class="title">Title</span>
    <span class="body">Body</span>
    <span class="title">Title</span>
    <span class="body">Body</span>
</div>

- iDavid2619

Answer 3

你不能为列或行间距设置不同的值，但是你可以使用 CSS 自定义属性，如 margin 或 display，或者创建额外的行和列，并将它们分配为间距使用不同的值。

- samaelWebDev

---

这个答案与其他答案相比并没有提供额外的信息。 - André