如何让隐式网格项占满列宽？

Question

我这里有一个代码笔：隐式网格项目

首先-我有一个网格容器列表，每个容器至少包含 3 个项目。 其次 - 这些行有一个系统，其中对于每个 even 容器，定义的网格有 3 列，而对于每个 odd 容器，定义的网格有 2 列。

在odd父级中，有一个隐式的第三项被推入新行。 我需要知道是否有办法让这个隐式项占据其父项的整个宽度。我需要一种无需针对单个项目即可执行此操作的方法。 有没有办法做到这一点？

HTML

<div class="row">
  <span class="item">1</span>
 <span class="item">2</span>
<!--   implicit item  -->
   <span class="item">3</span> 
  <!--   implicit item  -->
</div>
<div class="row">
  <span class="item">1</span>
 <span class="item">2</span>
   <span class="item">3</span>
</div>
<div class="row">
  
<!--   <span class="item">1</span> -->
 <span class="item">2</span>
</div>

CSS

.row {
  display: grid;
  margin-bottom: 2rem;
  grid-auto-flow: column;
  grid-template-columns 1fr 1fr 1fr;
  border: 1px solid black;
}

.item {
  border: 1px solid green;
}

.row:nth-child(odd) {
  background-color: aqua;
   grid-auto-flow: row;
    grid-template-columns: 1fr 2fr;
}