可以通过使用一个6列宽的网格，然后使用grid-column来让子元素适合网格子元素在正确的位置来实现这一点。要选择哪些网格项适合哪个元素，然后使用nth-child来选择正确的元素，如下所示：

• css tricks上的第n个子代
• MDN上的grid-column和grid-row
  编辑新增：我注意到在小屏幕宽度时，1fr单元不能均匀地缩放列，所以我通过将grid-template-columns从repeat(6, 1fr)更改为repeat(6, minmax(0,1fr))来解决这个问题。

.container {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.container > article {
  background-color: #8C78FE;
  padding: 1rem 1rem;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  display: grid;
  place-content: center;
}

article:first-child {
  grid-column: 1/span 3;
  grid-row: 1/span 3;
}

article:nth-child(-n + 4):not(:first-child) {
  grid-column: 4/span 3;
}

article:nth-child(n+5) {
  grid-column: span 2;
}

article:nth-child(n+11) {
  grid-column: span 1;
  background-color: #C6BBFF;
}

<div class='container'>
  <article>article1</article>
  <article>article2</article>
  <article>article3</article>
  <article>article4</article>
  <article>article5</article>
  <article>article6</article>
  <article>article7</article>
  <article>article8</article>
  <article>article9</article>
  <article>article10</article>
  <article>article11</article>
  <article>article12</article>
  <article>article13</article>
</div>