Can't reason how to span grid item?

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div class="span-item">D</div>
  <div>E</div>
</div>

.container {
  display: grid;
  grid: auto-flow / repeat(2, 1fr);
  background-color: #ccc;
  padding: 8px;
  border-radius: 4px;
  gap: 4px;

  > * {
    outline: 1px solid #f00;
  }

  > .span-item {
    grid-column-start: 2;
    grid-row: 2 / span 2;
    

    // grid-row-start: span 2; // work
    // grid-row: span 2; // work

  }
}