如何在 CSS Grid 中根据子元素数量动态调整列宽

本文介绍如何利用 CSS 选择器（如 :first-child:nth-last-child(n)）实现 Grid 列宽的响应式控制：当子项 ≤2 个时每列占 1/2 宽度，≥3 个时自动切换为每列占 1/3 宽度，无需 JavaScript 即可完成纯 CSS 动态布局。

本文介绍如何利用 CSS 选择器（如 :first-child:nth-last-child(n)）实现 Grid 列宽的响应式控制：当子项 ≤2 个时每列占 1/2 宽度，≥3 个时自动切换为每列占 1/3 宽度，无需 JavaScript 即可完成纯 CSS 动态布局。

CSS Grid 本身不支持“基于父容器子元素数量改变 grid-template-columns”的直接语法，但我们可以借助 兄弟选择器 + 伪类组合 实现等效效果——核心思路是：为不同数量的子项分别定义 .column 的 grid-column: span N 值，从而动态分配列跨度。

✅ 基本原理

利用 :first-child:nth-last-child(n) 选择器精准定位特定数量子元素的首个元素，再配合通用兄弟选择器 ~ 统一设置所有同级 .column 的列跨度：

1. :first-child:nth-last-child(2) → 匹配恰好含 2 个子项的容器中的第一个 .column；
2. :first-child:nth-last-child(2) ~ .column → 匹配该容器中其后的所有 .column（即第二个）；
3. 合并两者即可为全部 2 个子项统一设为 span 6（在 12 等分网格中占 1/2）；
4. 类似地，可扩展支持 1 项（span 12）、3 项（span 4）、4+ 项（span 3 或保持 span 4）等场景。

? 推荐实现方案（支持 1–4+ 项）

.container {display: grid;grid-template-columns: repeat(12, 1fr); /* 12 列基准网格 */gap: 8px;border: 1px solid #000;padding: 8px;}.column {border: 1px solid red;padding: 8px;background: #ffd700;font-weight: bold;}/* 1 个子项：占满整行 */.column:first-child:nth-last-child(1) {grid-column: span 12;}/* 2 个子项：各占 1/2（6 列） */.column:first-child:nth-last-child(2),.column:first-child:nth-last-child(2) ~ .column {grid-column: span 6;}/* 3 个子项：各占 1/3（4 列）→ 默认行为，可省略或显式声明 */.column:first-child:nth-last-child(3),.column:first-child:nth-last-child(3) ~ .column {grid-column: span 4;}/* 4 个及以上子项：仍维持 1/3（或按需改为 1/4）*//* 此处保留 span 4，即最多显示 3 列，多余项自动换行 */

⚠️ 注意事项与限制

1. 必须使用固定列数网格（如 repeat(12, 1fr)）：动态 minmax() 或 auto-fit 配合 :nth-child 无法直接实现数量判断；
2. 顺序敏感：.column 元素需连续、无其他类型子元素干扰，否则 :nth-last-child 计算会出错；
3. 浏览器兼容性良好：:first-child:nth-last-child(n) 在所有现代浏览器（Chrome 57+, Firefox 52+, Safari 9+）中均受支持；
4. 不适用于动态增删 DOM 的场景：若通过 JS 添加/删除 .column，CSS 选择器不会重计算——此时需配合 :has()（实验性，暂不推荐生产环境使用）或回退至 JS 控制。

✅ 总结

纯 CSS 实现“按子项数量自适应 Grid 列宽”的关键在于 用伪类组合精确锚定子项数量边界，并通过 grid-column: span X 在固定网格轨道上分配空间。本方案简洁、高效、零 JS 依赖，特别适合静态内容或服务端渲染场景。如需更灵活的响应式逻辑（如依据视口宽度+子项数双重判断），建议结合 @container 查询（需启用容器查询支持）或轻量 JS 辅助。