使用Flexbox的动态示例（如果不知道元素数量）：

html,
body,
section {
  margin: 0;
  height: 100%;
}

section {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  margin: 1rem 1rem 4rem;
}

article {
  flex: 1 1 1px;
  display: grid;
  place-content: center;
  background-color: plum;
}

article:first-child {
  flex: 100%;
}

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
</section>
<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>
<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
</section>

下面是一个简单的3个元素的示例，您可以将grid-column: span 2转换为:first-child：
一个二个一个一个
您可以针对4个元素进行调整：

html,
body,
section {
  margin: 0;
  height: 100%;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

article {
  display: grid;
  place-content: center;
  background-color: plum;
}

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

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>