网格面积范围不适用于填充整个容器的行

Question

在下面的代码中，我需要框1和2都占用2列和2行，而行线和列线起始值保持为auto。像这样：

网格区域：自动/自动/跨度2 /跨度2；

当有4列或3列时，一切工作都很好，但是一旦我将列数减少到2，则框1和2不再占用2行，如span属性所指示的那样。即使跨度设置为2行，它们也仅占用1行。我在这里想念什么吗？要查看我在说什么，请按原样运行此代码。然后将另一个“自动”添加到grid-template-columns属性并再次运行。您将看到框1和2现在可以正常运行。

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255,255,255,.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-area: auto / auto / span 2 / span 2;
}

.item2 {
  grid-area: 3 / 1 / span 2 / span 2;
}

<div class="grid-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>