CSS Grid - 我们可以根据行调整间隙吗？答案

【问题标题】：CSS Grid - can we adjust the gap according to rows?CSS Grid - 我们可以根据行调整间隙吗？
【发布时间】：2020-09-20 08:26:07
【问题描述】：

我正在尝试重新创建 Mondrian painting。

.wrapper {
  width: 600px;
  height: 600px;
  background: url(painting.png) no-repeat;
    display: grid;
    grid-gap: 40px 20px;
    grid-template-rows: 178px 219px 61px 63px;
    grid-template-columns: 128px 392px 44px;
 
}
div {
    border: 1px solid black;
    background-color: white;
    opacity: 0.5;
}
.a {
    grid-row: 1/2;
    grid-column: 1/2;

}
.b {
    grid-row: 2/3;
    grid-column: 1/2;
}
.c {
    grid-row: 1/3;
    grid-column: 2/4;
}
.d {
    grid-row: 3/5;
    grid-column: 1/2;
}
.e {
  grid-row: 3/5;
    grid-column: 2/3;   
}
.f {
    grid-row: 3/4;
    grid-column: 3/4;
 }

<body>
    <div class="wrapper">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
        <div class="d">d</div>
        <div class="e">e</div>
        <div class="f">f</div>
        <div class="g">g</div>
    </div>
</body>

我几乎用布局把它钉牢了。问题是行之间有不同的间隙值。所以在一个上有例如24 像素和其他 40 像素。有没有办法可以在不同行的间隙上应用不同的值。或者我应该对现有的这个感到满意吗？谢谢！

【问题讨论】：

标签： html css layout css-grid

【解决方案1】：

一个网格中不能有多个间隙大小。

一种解决方法是为网格使用最小尺寸的间隙，并在需要时用边距补充它：

.wrapper {
  width: 600px;
  height: 600px;
  background: url(painting.png) no-repeat;
  display: grid;
  grid-gap: 20px 20px;
  grid-template-rows: 178px 219px 61px 63px;
  grid-template-columns: 128px 392px 44px;
}

div {
  border: 1px solid black;
  background-color: blue;
  opacity: 0.5;
}

.a {
  grid-row: 1/2;
  grid-column: 1/2;
  margin-bottom: 20px;
}

.b {
  grid-row: 2/3;
  grid-column: 1/2;
}

.c {
  grid-row: 1/3;
  grid-column: 2/4;
}

.d {
  grid-row: 3/5;
  grid-column: 1/2;
}

.e {
  grid-row: 3/5;
  grid-column: 2/3;
}

.f {
  grid-row: 3/4;
  grid-column: 3/4;
}

<body>
  <div class="wrapper">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
    <div class="g">g</div>
  </div>
</body>

【讨论】：

好吧，我明白了.. 所以它本身的网格结构是刚性的。我们应用的黑客必须添加例如边距。