如何在动态列CSS Grid中插入整行空白行？

我正在使用一款可自动适配宽度、空间不足时换行的CSS Grid，当前代码如下：

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
}

希望插入一行从开头起跨满整个宽度的空白行，效果如下：

a   a   a   a
a   a   a
X   X   X   X
a   a   a   a
a   a

请问这能否通过CSS Grid实现？具体方法是什么？

完全可以实现，推荐两种实用方法：

• 插入空白网格项并设置跨列
  在需要空白行的位置添加一个空的<div>元素，给它设置grid-column: 1 / -1，这个属性会让元素自动跨满当前网格的所有列，形成整行空白。你还可以通过height属性控制空白行的高度，比如和网格间隙保持一致。

  示例代码：
  HTML部分：

  <div class="grid-container">
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <!-- 空白行元素 -->
      <div class="empty-row"></div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
      <div class="item">a</div>
  </div>
  

  CSS部分：

  .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      grid-gap: 0.5rem; /* 合并row和column gap的简写 */
  }
  .empty-row {
      grid-column: 1 / -1;
      height: 0.5rem; /* 自定义空白行高度 */
  }
  

• 利用伪元素生成空白行（无需额外HTML）
  不想添加多余DOM元素的话，可以用伪元素配合grid-column属性实现。比如要在第7个网格项后插入空白行：

  .grid-container .item:nth-child(7)::after {
      content: '';
      grid-column: 1 / -1;
      height: 0.5rem;
      display: block;
  }
  

  注意必须给伪元素设置display: block，才能被网格布局识别并占据整行空间。

这两种方法都能适配网格的自动列数变化，不管屏幕宽度怎么变，空白行都会始终跨满容器的整个宽度。

内容的提问来源于stack exchange，提问作者Lars