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

7vux5j2d 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(141)

我正在创建一个使用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>

css

来源：https://stackoverflow.com/questions/47461444/setting-different-lengths-for-grid-gaps-in-css-grid

2条答案

按热度按时间

yizd12fk1#

有没有什么网格技巧可以实现这一点，grid-row-gap似乎只取一个值，它用于所有行。
使用grid-row-gap、grid-column-gap和grid-gap属性，您无法对不同的间距应用不同的宽度。正如您所注意到的，每个轴只能使用一个值：一个用于行间距，另一个用于列间距（规范）。
您可以使用边距（或填充）来显示额外的空间，但这实际上并不改变间隙的宽度，它只是扩展了行。
在下面的示例中（基于您的代码），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>

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