在CSS网格中为网格间隙设置不同的长度 [英] Setting different lengths for grid gaps in CSS Grid

问题描述

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

I'm creating a layout using CSS Grids, and I want to have different space between each row.

我可以通过仅在每个元素上使用空白来创建良好的布局，但是这种方式掩盖了代码的简单性.我有什么网格技巧可以做到这一点，grid-row-gap似乎只有一个值，它用于所有行.

I can create the layout fine by just using margin on each element, but this kind of obscures the simplicity of the code. Is there any grid tricks I can do achieve this, grid-row-gap only seems to take one value, which it uses for all rows.

我想要实现的是这样的布局:

What I'm trying to achieve is a layout like this:

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似乎只有一个值，它用于所有行.

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属性，您不能将不同的宽度应用于不同的间隙.如您所述，每个轴只能使用一个值:一个用于行间隙，另一个用于列间隙(规范).

With the grid-row-gap, grid-column-gap and grid-gap properties, you cannot apply different widths to different gaps. Like you noted, only one value can be used for each axis: One for row gaps and another for column gaps (spec).

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

You could use margins (or padding) to show extra space, but this doesn't actually change the width of the gap. It only expands the row.

在下面的示例中(根据您的代码)，grid-row-gap设置为20px.网格项目具有您设置的margin-bottom变体.请注意grip-row-gap大小是如何不变的.所有更改都在行内进行.

In the example below (based on your code), grid-row-gap is set to 20px. Grid items have the margin-bottom variations you set. Notice how the grip-row-gap size never changes. All changes occur inside the row.

.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>

如果要在行之间应用不同的大小间距，请考虑为作业使用实际的行:

If you want to apply different size gaps between rows, then consider using actual rows for the job:

现在行之间的间隙具有自己独特的高度.

Now the gaps between rows have their own unique heights.

.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>

这篇关于在CSS网格中为网格间隙设置不同的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！