Irregular grid lines on one part of css grid - html

Question

I've got a really simple grid set up in CSS, but when I look at the grid lines in the inspector there's a strange irregularity at the bottom. I can't understand why this exists when the rest of the grid lines are all regular.
There's no special styling on div-4, it's just the same as the rest. Is it something to do with the margins produced by the h3 tag?
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

You defined only 8 explicit rows and you have placed the div4 starting at line 10 which will create 2 extra rows so you will end up with 10 rows in total where only 8 are sized using the 1fr and 2 will have an auto size: the empty one you see and the one where you placed div4.
To avoid this use grid-auto-rows:1fr instead of your template in order to make sure all the rows are sized the same way:
.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>
You can also simplify your code like below:
.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>