本文介绍一种纯 CSS 方案，通过嵌套 Grid 布局模拟 grid-template-columns: repeat(4, minmax(200px, 1fr)) 的四列等宽响应式效果，适用于无法更改 HTML 嵌套结构（.col1 > .col2 > .col3 > .col4）的场景。
本文介绍一种纯 css 方案，通过嵌套 grid 布局模拟 `grid-template-columns: repeat(4, minmax(200px, 1fr))` 的四列等宽响应式效果，适用于无法更改 html 嵌套结构（`.col1 > .col2 > .col3 > .col4`）的场景。
当 HTML 结构被锁定为深度嵌套（而非并列的四个同级 <div>）时，直接使用 display: grid 并设置 grid-template-columns 无法生效——因为 Grid 容器仅对其直接子元素进行列布局，而 .col2、.col3、.col4 是层层包裹的后代元素，并非 .col1 的直系子项。
要达成视觉上“四列等宽、最小 200px、弹性分配剩余空间”的效果，需采用逐层递进式 Grid 分割策略，通过数学比例还原 repeat(4, minmax(200px, 1fr)) 的逻辑本质：
- repeat(4, minmax(200px, 1fr)) 表示：总宽度均分为 4 份，每份至少 200px，剩余空间按 1:1:1:1 比例分配；
- 因此，理想状态下四列宽度相等，且总容器宽度 = 4 × max(200px, 1fr)；
- 在嵌套结构中，需让每一层容器将其可用宽度“拆解”为两部分：一部分留给当前层级内容（对应第 1 列），另一部分留给深层嵌套（对应剩余 3 列 → 2 列 → 1 列）。
具体实现如下：
.col1 {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(600px, 3fr); /* 1:3 → 对应第1列 + 后3列 */
}
.col2 {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr); /* 1:2 → 第2列 + 后2列 */
}
.col3 {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr); /* 1:1 → 第3列 + 第4列 */
}
/* .col4 无需设置 grid，它将自然占据 .col3 的第二格 */✅ 关键原理说明：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- .col1 将自身宽度划分为 1fr : 3fr，左侧 1fr 显示 1111（第 1 列），右侧 3fr 包含整个 .col2；
- .col2 在其父分配的 3fr 宽度内再划分为 1fr : 2fr，左侧显示 2222（第 2 列），右侧容纳 .col3；
- .col3 进一步划分为 1fr : 1fr，左侧为 3333（第 3 列），右侧为 .col4（第 4 列）；
- 所有 minmax(200px, 1fr) 确保每列最小宽度为 200px；当容器足够宽时，四列严格等宽（因 1fr 在各层比例中最终收敛为 1:1:1:1）。
⚠️ 注意事项：
- 此方案依赖精确的比例推导（1:3 → 1:2 → 1:1），若后续需扩展为 5 列，需重新计算各层比例（如 .col1: 1fr 4fr → .col2: 1fr 3fr → .col3: 1fr 2fr → .col4: 1fr 1fr）；
- 避免为 .col4 设置 width 或 float，否则会破坏 Grid 布局流；
- 若内容高度差异大，可为各列添加 align-items: start 保持顶部对齐；
- 浏览器兼容性良好（支持 Grid 的现代浏览器均适用，IE 不支持，需另寻 fallback）。
该方法虽不如扁平化 HTML + 单层 Grid 简洁，但在结构不可变的约束下，是语义清晰、行为可控、完全符合 CSS 规范的最优解。
