如何用CSS Grid实现随子元素数量动态调整列数（无需逻辑判断）

你可以通过grid-template-columns结合min()函数和auto-fit来实现需求，完全不需要JS判断子元素数量：

.grid-container {
  display: grid;
  /* 核心逻辑：每列最小宽度取 50%（两列布局）和 1/3宽度（三列布局）中的较小值 */
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 100% / 3), 1fr));
  gap: 1rem; /* 可选，设置子元素间距 */
}

原理说明： #

• 当容器内有1或2个子元素时，min(50%, 100%/3)的结果是50%，auto-fit会生成两列，每个子元素占据50%宽度（1个子元素时剩余空间留白）。
• 当子元素数量≥3时，min(50%, 100%/3)的结果约为33.33%，auto-fit会自动生成三列，超出三列的子元素自动换行。

如果希望1个子元素时占满整行，可单独调整：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 100% / 3), 1fr));
  gap: 1rem;
}

/* 单独处理仅1个子元素的情况，让它占满整行 */
.grid-container > :only-child {
  grid-column: 1 / -1;
}

备选方案（使用:has()伪类） #

如果目标浏览器支持:has()（目前Chrome、Firefox、Safari均已支持），可以用更直观的写法：

.grid-container {
  display: grid;
  /* 默认两列布局 */
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* 当容器内存在至少3个子元素时，切换为三列 */
.grid-container:has(:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}

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