如何用CSS Grid实现基于子项数量的动态列布局（最多4列）

当然可以仅用CSS实现你想要的动态列布局！不用借助任何JavaScript，我们可以利用CSS的选择器和Grid特性来完美匹配你的需求。

核心思路 #

我们需要让容器根据子项数量自动切换列数：

• 子项数量1-3个时，保持3列布局
• 子项数量为4个时，切换为4列布局

方案1：使用:has()选择器（推荐，现代浏览器支持） #

:has()是CSS中非常实用的选择器，它允许我们根据容器内部的子元素状态来设置容器的样式。这里我们可以通过检测容器是否包含第4个子元素，来动态修改网格列数。

修改后的CSS代码如下：

.container {
 display: grid;
 grid-gap: 10px;
 grid-template-columns: repeat(3, 1fr); /* 默认3列 */
 border: 1px solid #c1c1c1;
 border-radius: 5px;
 padding: 5px;
}

/* 当容器存在第4个子项时，切换为4列 */
.container:has(:nth-child(4)) {
 grid-template-columns: repeat(4, 1fr);
}

.container > div {
 height: 100px;
 border: 1px solid #010101;
 border-radius: 5px;
}

方案2：兼容旧浏览器的替代方案 #

如果需要兼容不支持:has()的旧版浏览器（比如Firefox 120以前的版本），我们可以结合CSS变量和子元素数量检测选择器来实现：

.container {
 display: grid;
 grid-gap: 10px;
 /* 使用CSS变量默认设置3列 */
 grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
 border: 1px solid #c1c1c1;
 border-radius: 5px;
 padding: 5px;
}

/* 检测子项数量恰好为4个时，修改CSS变量为4 */
.container > div:nth-last-child(4):first-child,
.container > div:nth-last-child(4):first-child ~ div {
 --grid-columns: 4;
}

.container > div {
 height: 100px;
 border: 1px solid #010101;
 border-radius: 5px;
}

效果验证 #

使用你提供的HTML代码，当子项为1-3个时，容器会保持3列布局，子项均匀填充；当子项增加到4个时，容器会自动切换为4列，所有子项在同一行显示，不会出现换行问题。

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