本文介绍如何利用 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 的列跨度：
- :first-child:nth-last-child(2) → 匹配恰好含 2 个子项的容器中的第一个 .column；
- :first-child:nth-last-child(2) ~ .column → 匹配该容器中其后的所有 .column（即第二个）；
- 合并两者即可为全部 2 个子项统一设为 span 6（在 12 等分网格中占 1/2）；
- 类似地，可扩展支持 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 列，多余项自动换行 */
⚠️ 注意事项与限制
- 必须使用固定列数网格（如 repeat(12, 1fr)）：动态 minmax() 或 auto-fit 配合 :nth-child 无法直接实现数量判断；
- 顺序敏感：.column 元素需连续、无其他类型子元素干扰，否则 :nth-last-child 计算会出错；
- 浏览器兼容性良好：:first-child:nth-last-child(n) 在所有现代浏览器（Chrome 57+, Firefox 52+, Safari 9+）中均受支持；
- 不适用于动态增删 DOM 的场景：若通过 JS 添加/删除 .column，CSS 选择器不会重计算——此时需配合 :has()（实验性，暂不推荐生产环境使用）或回退至 JS 控制。
✅ 总结
纯 CSS 实现“按子项数量自适应 Grid 列宽”的关键在于 用伪类组合精确锚定子项数量边界，并通过 grid-column: span X 在固定网格轨道上分配空间。本方案简洁、高效、零 JS 依赖，特别适合静态内容或服务端渲染场景。如需更灵活的响应式逻辑（如依据视口宽度+子项数双重判断），建议结合 @container 查询（需启用容器查询支持）或轻量 JS 辅助。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
