Grid item not spanning as specified

Question

I am trying to make a grid item (.item3) span entirely across and 3 rows down. After spanning it column wise, it won't span row wise. But if I increase the row span value to 4, it works. However the spanning is only 2 rows instead of 4. Here's the code.

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

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Answer 1

Your code has no definition for the rows. Once you add that, you see the span visibly does what can be expected.

Before that, your virtual rows kind of collapsed because they themselves had no content, and were sized the default, which is auto.

grid-template-rows: repeat(5, 24px);

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 24px);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

I assume you are aware that a grid cell is always rectangular.