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个显式行，并且已将div4放置在第10行开始，这将创建2个额外的行，因此最终将总共有10行，其中仅使用1fr调整了8行的大小，而2行具有auto大小：您看到的空值和放置div4的位置