css网格的一部分上的不规则网格线

Question

我在 CSS 中设置了一个非常简单的网格，但是当我在检查器中查看网格线时，底部有一个奇怪的不规则性。当其余的网格线都是规则的时候，我不明白为什么会出现这种情况。

div-4 没有特殊的样式，它和其他的一样。是不是和h3标签产生的边距有关？

HTML

<div class="left-sidebar-grid">
    <div class="div1">
        <h3>Div1</h3>
    </div>
    <div class="div2">
        <h3>Div2</h3>
    </div>
    <div class="div3">
        <h3>Div3</h3>
    </div>
    <div class="div4">
        <h3>Div4</h3>
    </div>
</div>

CSS

.left-sidebar-grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(8, 1fr);
  grid-gap: 16px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 4 / 2; }
.div3 { grid-area: 4 / 1 / 10 / 2; }
.div4 { grid-area: 10 / 1 / 11 / 2; }

Answer 1

您只定义了 8 个显式行，并且从第 10 行开始放置了 div4，这将创建 2 个额外的行，因此您最终将总共有 10 个行，其中只有 8 个使用 1fr 调整大小，而 2 个将有一个auto 大小：你看到的那个空的和你放置div4 的那个。

为避免这种情况，请使用 grid-auto-rows:1fr 而不是您的模板，以确保所有行的大小都相同：

.left-sidebar-grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 16px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 4 / 2; }
.div3 { grid-area: 4 / 1 / 10 / 2; }
.div4 { grid-area: 10 / 1 / 11 / 2; }

<div class="left-sidebar-grid">
    <div class="div1">
        <h3>Div1</h3>
    </div>
    <div class="div2">
        <h3>Div2</h3>
    </div>
    <div class="div3">
        <h3>Div3</h3>
    </div>
    <div class="div4">
        <h3>Div4</h3>
    </div>
</div>

你也可以像下面这样简化你的代码：

.left-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 16px;
}

.div1 {
  grid-row:span 1;
}

.div2 {
  grid-row:span 2;
}

.div3 {
  grid-row:span 6;
}

.div4 {
  grid-row:span 1;
}

<div class="left-sidebar-grid">
  <div class="div1">
    <h3>Div1</h3>
  </div>
  <div class="div2">
    <h3>Div2</h3>
  </div>
  <div class="div3">
    <h3>Div3</h3>
  </div>
  <div class="div4">
    <h3>Div4</h3>
  </div>
</div>