有没有一种方法可以在一个网格容器和可能的无限行（有 3 个项目）中对这个特定布局进行 CSS 网格化？

Question

我有一个 div，它是“display:grid”。

<div>
  <article>article1</article>
  <article>article2</article>
  <article>article3</article>
  <article>article4</article>
  <article>article5</article>
  <article>article6</article>
  ...
</div>

我想要这个特定的布局：

我设法让它使用 6 个网格模板列工作，但我担心的是，当有超过 10 篇文章时，第 11 篇文章将是 1/6 宽，因为网格只有 5 个网格模板行:

如果有数十篇文章，不知道需要多少行，并保持原始结构（一个带有文章子项的网格 div），如何实现这种布局（连续 3 篇文章）？

感谢您的帮助。

Answer 1

可以通过使用 6 列宽的网格然后使用 grid-column 让子元素在正确的位置适合网格子元素来做到这一点。要选择哪些网格项目适合哪个元素，然后使用

nth-child

来选择正确的项目，如下所示：

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

.container > article {
  background-color: #8C78FE;
  padding: 3rem 1rem;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  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;
}

<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>