如何在不修改 HTML 结构的前提下，用 CSS 实现四列级联布局

本文介绍一种纯 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 结构被锁定为深度嵌套（而非并列的四个同级 <p>）时，直接使用 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 的第二格 */

✅ 关键原理说明：

立即学习“前端免费学习笔记（深入）”；

• .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 规范的最优解。