在无法更改嵌套 HTML 结构的前提下，通过逐层设置 display: grid 与精确计算的 grid-template-columns，可模拟出与 grid-template-columns: repeat(4, minmax(200px, 1fr)) 完全一致的四列等比响应式布局效果。
在无法更改嵌套 html 结构的前提下，通过逐层设置 `display: grid` 与精确计算的 `grid-template-columns`，可模拟出与 `grid-template-columns: repeat(4, minmax(200px, 1fr))` 完全一致的四列等比响应式布局效果。
要实现四个视觉上并列、宽度比例均衡的“列”，而 HTML 结构却是深度嵌套（.col1 > .col2 > .col3 > .col4），关键在于：将每一级容器视为一个双列网格容器，并通过数学配比，让其子内容（文本）占据第一列，子容器（下一级 div）占据第二列，且第二列宽度按需递减，最终使四块内容在水平方向上呈现等权重分布。
具体原理如下：
- 原始理想 Grid（可直接使用时）：repeat(4, minmax(200px, 1fr)) 表示 4 个轨道，每轨最小 200px、最大均分剩余空间（即各占 1fr）。因此总宽度逻辑上 = 4fr（当空间充足时），每列占比 25%。
- 但当前结构是树状嵌套，.col1 必须容纳自身文本（第1列）+ .col2（代表后3列）；同理，.col2 需容纳自身文本（第2列）+ .col3（代表后2列）……以此类推。
- 因此我们采用「逆向拆分」策略：
- .col1：2 列 → 第1列（1111）占 1fr，第2列（整个 .col2 及其后代）占 3fr → 总和 4fr，对应原始 4 列比例
- .col2：2 列 → 第1列（2222）占 1fr，第2列（.col3 及后代）占 2fr → 总和 3fr（即继承自 .col1 的 3fr 中再分）
- .col3：2 列 → 第1列（3333）占 1fr，第2列（.col4）占 1fr → 总和 2fr（即继承自 .col2 的 2fr 中均分）
- .col4：无需再分，直接设为 width: 100% 或保持默认块级行为即可（它天然占据最后一列）
对应 CSS 如下：
.col1 {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(600px, 3fr);
}
.col2 {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr);
}
.col3 {
display: grid;
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
}
.col4 {
/* 可选：显式控制对齐或内边距 */
width: 100%;
}
✅ 效果验证：当视口足够宽时，四段内容（1111 / 2222 / 3333 / 4444）将严格按 1fr : 1fr : 1fr : 1fr 水平排列，每列最小宽度均为 200px；当空间受限时，所有列同步收缩至 200px 后停止，完全复现 repeat(4, minmax(200px, 1fr)) 的响应行为。
⚠️ 注意事项：
- 此方案依赖于严格的嵌套层级与类名约定，不可增删或错位嵌套；
- 若未来需扩展为 5 列，需按相同逻辑反推：.col1 → 1fr + 4fr，.col2 → 1fr + 3fr，依此类推；
- 不推荐用于复杂交互场景（如动画、拖拽），因嵌套 Grid 可能增加渲染开销；
- 若允许少量 JS 辅助，也可通过 display: contents + grid-area 动态重排，但本解法坚持纯 CSS，零脚本依赖。
该方案虽不如扁平化 Grid 直观，却是在约束条件下最精准、可预测且符合 CSS 规范的实现方式——它不是“近似”，而是数学等价的布局映射。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
