通过结合CSS规则nth-child和nth-last-of-type，这对于CSS网格是完全可行的。唯一的警告是列数需要提前知道。

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

我不认为CSS Grid是你要构建的布局的最佳选择，至少如果它是动态的，你不知道容器上有多少项，Flexbox实际上更适合一维布局;保持所有东西的大小完全相同并完全按照您的需要使用所有可用空间可能会有点困难，但最终这种类型的情况是FlexBox的构建目的。
当然，你也可以通过在CSS上使用少量的计算来利用100%的宽度。
CSS网格可能更好地保持行和列对齐，但这是一个不同的情况。

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.flex-item {
  width: 30%;
  border: 1px solid #000;
  flex-grow: 1;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0 5px 10px;
  justify-content: space-between;
  text-align: center;
}

<div class="container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>

对于那些只想知道最后一个元素的答案的人，如果使用的是tailwindcss，可以尝试grid-column: 1 / -1;或col-span-full。

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}
div > span:last-of-type {
  grid-column: 1 / -1;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>

这在current version (Level 1) of CSS Grid中是不可能的，但是，这在flexbox中并不太复杂。

• 你在评论中写道 *

我使用Flexbox作为后备。我研究网格的一个（不是唯一的）原因是使用"gap"和它附带的其他特性。例如，尽管可以通过边距模拟gap，但由于我们不知道最后一行中的项数，因此消除侧面的gap（在容器的侧面）将需要额外的代码。
你说得对CSS Grid中的grip-gap特性非常方便，不过，您也可以在Flexbox中使用边距来模拟这种行为，而不会太复杂。

div {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0px 5px 5px;
  margin: 20px auto;
  width: 400px;
  background: #d8d8d8;

  }
span {
  flex: 1 0 30%;
  height: 50px;
  margin-top: 5px;
  margin-right: 5px;
  background: blue;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
  <span></span>
</div>

<div>
  <span></span>
</div>

您可以尝试使用nth-child和last-of-type选择器只选择超出的项，最后将最后一项扩展到网格中的列总数（使用grid-column: 1 / -1时自动完成）

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 8px;
}

.grid-item {
  background: lightblue;
}

.grid-item:nth-child(2n-1):last-of-type {
  background: coral;
  grid-column: 1 / -1;
}

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>

我已经找到了你问题的答案，我把它复制在这里：https://jsfiddle.net/nmcobalt/dg3mutwv/13/
为了降低css的复杂性并解决这个复杂的问题，建议使用SCSS* 而不是普通的css。
在SCSS文件中，您必须使用css选择器 nth：last-child，根据模函数和3列的常数因子迭代计算查尔兹项。

@mixin setLastChildFluid{
  @for $i from 1 through 10 {    
    $span: 3;
    @if $i % 3 == 0{
      $span: 1;
    } @else if $i % 3 == 1{
      $span: 3;
    } @else if $i % 3 == 2{
      $span: 2;
    } 
    @if $span == 2 {
      span:nth-child(#{$i - 1}){
        &:nth-last-child(2){
          grid-column-end:span 1;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:0;    
        }
      }
      span:nth-child(#{$i}){
        &:nth-last-child(1){
          grid-column-start:2;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:calc(50% + 5px);
        }
      }
      
    } @else {
      span:nth-child(#{$i}){
        &:last-child{
            grid-column-end:span #{$span};          
        }
      }
    }
    
  }
}
div {
  position:relative;
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  
  @include setLastChildFluid;
}
span {
  height: 50px;
  background: blue;
  color:yellow;
}

以及下面的HTML标记;我做了两个不同的例子（用div Package ）来重现您的查询：

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</div>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

更改刻度数，以查看液体结果。

• SASS是一种预处理器脚本语言，可解释或编译为级联样式表（CSS）。https://sass-lang.com/guide