您需要每20个孩子选择第5、第6、第19和第20个。:nth-child()接受**a**n+**b**形式的公式，其中我们需要将a替换为20，将b替换为5/6/19/20：

.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {}

试试看：

const parent = document.querySelector('.parent');

for (let i = 0, l = 40 + Math.random() * 40 | 0; i < l; i++) {
  const child = document.createElement('div');
  child.classList.add('child');
  child.textContent = `child-${i + 1}`;
  parent.appendChild(child);
}

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.child {
  background: tomato;
  height: 20px;
}

.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {
  background: cadetblue;
  grid-column: span 2;
}

<div class="parent"></div>

您可以通过指定4列的网格来实现此目的...
编辑：描述发生了变化，图像使需要的东西更清晰。以下是编辑版本：
...然后注意到所有内容都在一个单元格中，除非它是：nth-child（20 n +5）、：nth-child（20 n +6）、：nth-child（20 n +19）或：nth-child（20 n +20），并将列跨度设置为2。
下面是一个简单的代码片段，添加了一些元素，以确保我们重复这个模式：

<style>
  .parent {
    display: grid;
    width: 100vw;
    grid-template-columns: repeat(4, 1fr);
  }
  
  .child:nth-child(20n + 5),
  .child:nth-child(20n + 6),
  .child:nth-child(20n + 19),
  .child:nth-child(20n + 20) {
    grid-column: span 2;
  }
</style>
<div class="parent">
  <div class="child">child-1</div>
  <div class="child">child-2</div>
  <div class="child">child-3</div>
  <div class="child">child-4</div>
  <div class="child">child-5</div>
  <div class="child">child-6</div>
  <div class="child">child-7</div>
  <div class="child">child-8</div>
  <div class="child">child-9</div>
  <div class="child">child-10</div>
  <div class="child">child-11</div>
  <div class="child">child-12</div>
  <div class="child">child-13</div>
  <div class="child">child-14</div>
  <div class="child">child-15</div>
  <div class="child">child-16</div>
  <div class="child">child-17</div>
  <div class="child">child-18</div>
  <div class="child">child-19</div>
  <div class="child">child-20</div>
  <div class="child">child-21</div>
  <div class="child">child-22</div>
  <div class="child">child-23</div>
  <div class="child">child-24</div>
  <div class="child">child-25</div>
  <div class="child">child-26</div>
  <div class="child">child-27</div>
  <div class="child">child-28</div>
  <div class="child">child-29</div>
  <div class="child">child-30</div>
  <div class="child">child-31</div>
  <div class="child">child-32</div>
  <div class="child">child-33</div>
  <div class="child">child-34</div>
  <div class="child">child-35</div>
  <div class="child">child-36</div>
  <div class="child">child-37</div>
  <div class="child">child-38</div>
  <div class="child">child-39</div>
  <div class="child">child-40</div>
  <div class="child">child-41</div>
  <div class="child">child-42</div>

</div>

你们两个都很接近解决方案。根据图像，应该更宽的单元格是第5个和第6个，然后再过14个单元格（12 + 2个更宽的单元格）。
这段代码将做到这一点：

.child:nth-child(14n + 5), .child:nth-child(14n + 6) {
    grid-column: span 2;
}

并且应该从原始代码中删除此段：

.child:nth-child(-n + 2) {
  grid-column: span 2; 
  grid-row: span 2;
}

.child:nth-child(5n) {
  grid-column: span 1; 
  grid-row: span 2;
}

更新

为了匹配注解中提到的模式（4->2->12->2->4->2->12->2），以下代码将工作：

.child:nth-child(20n + 5), .child:nth-child(20n + 6), .child:nth-child(20n + 19), .child:nth-child(20n + 20)  {
    grid-column: span 2;
}