如何用单个CSS Grid容器实现无限行三元素特定布局？

问题场景 #

现有一个设置了display:grid的div容器，内部包含多个article子元素，DOM结构如下：

<div class="container">
  <article>article1</article>
  <article>article2</article>
  <article>article3</article>
  <article>article4</article>
  <article>article5</article>
  <article>article6</article>
  ...
</div>

原本通过设置grid-template-columns: repeat(6, 1fr)能实现基础布局，但当article数量超过10个时，超出元素的宽度会变为容器的1/6，导致布局错乱。需要在保持现有DOM结构不变的前提下，实现每行固定3个元素、支持无限行扩展的布局效果。

解决方案 #

核心思路是放弃固定列数（6列）和固定行数的设置，直接定义每行3列，让Grid自动处理行的生成：

.container {
  display: grid;
  /* 定义每行3列，每列宽度均分容器可用空间 */
  grid-template-columns: repeat(3, 1fr);
  /* 可选：设置元素之间的间距，提升布局美观度 */
  gap: 16px;
  /* 无需设置固定行数，Grid会自动根据元素数量生成新行 */
}

原理说明 #

• repeat(3, 1fr)：表示创建3个宽度相等的列，1fr代表分配容器剩余空间的1份，3列各占1/3宽度。
• Grid默认的grid-auto-flow: row会自动让元素按行排列，填满一行后自动换行到下一行，无论元素数量多少，都会保持每行3个的布局。
• 去掉固定行数的设置（如grid-template-rows），让Grid根据元素数量自动生成足够的行，避免超出元素被挤压到额外列中。

特殊情况适配（如果需要） #

如果你的“特定布局”包含部分元素跨列/跨行的需求（比如某个article占2列宽度），可以通过grid-column属性单独设置：

/* 让第一个article占满一行（跨3列） */
article:first-child {
  grid-column: 1 / -1;
}

这种设置不会影响后续元素的排列，后续元素依然会自动按每行3个的规则换行。

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