Why is the grid-gap ignored on this multi row grid item?

Question

Consider the following example:

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container > div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 3;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

Why does the grid-gap on the 5th element work like that? It looks as if the gap is now part of the element. I would expect that the bottom end of the element would be aligned with the bottom end of the 7th element. The 3rd element works as I would expect. Here's the Fiddle.

Edit If the desired effect is to show the last (implicit) row, the solution is to add grid-auto-rows: 1fr;. See Fiddle.

Answer 1

On item 5 you have grid-row: span 3.

You only needed span 2.

With span 3, you've created an extra row, into which the fifth item spans.

Items 7 and 8 aren't set to span that far.

Notice how your grid should have 5 row lines (creating 3 rows), but the span 3 on item 5 creates an unnecessary 6th row line (creating 4 rows).

The span 3 on item 3 works fine.

div {
  border: 1px solid black;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container > div {
  min-height: 40px;
}

.item3 {
  grid-row: span 3;
}

.item4 {
  grid-column: span 2;
}

.item5 {
  grid-row: span 2; /* adjustment */
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

The span keyword

Keep in mind that span counts row / column lines.

So referring to the image again:

• grid-column: 1 / span 4, would span across the entire grid, and create one extra column.

• grid-row: 2 / span 3, would span down the entire grid, starting at the second row.

• grid-row: 3 / span 3, would span down the entire grid, starting at the third row, and create an extra row (like the problem in the question)

More about the span keyword in the spec