不等宽多列排版应优先用grid-template-columns混合单位（如120px 1fr 80px），避免百分比；minmax()实现弹性底线，gap参与空间分配，嵌套Grid隔离复杂度。
grid-template-columns 用混合单位定义不等宽列
不等宽多列排版的核心不是靠 JavaScript 算宽度，而是直接用 grid-template-columns 声明不同单位的组合。比如固定标签列 + 弹性输入框列 + 固定操作按钮列，120px 1fr 80px 就能一步到位。
常见错误是写成 20% 60% 20% —— 百分比依赖父容器总宽，一旦父容器有 padding 或 border，列宽就失准；而 px + fr 组合更可控，尤其适合表单、控制面板这类有明确语义宽度的场景。
-
fr单位只分配剩余空间，不会侵占固定尺寸列（如120px标签列） - 避免混用
auto和fr：比如auto 1fr中的auto会按内容撑开，可能挤占1fr的空间，导致错行 - 若某列需最小宽度保障（如操作按钮不能太窄），改用
minmax(80px, 120px)替代单纯80px
用 minmax() 实现“有底线的弹性列”
当一列既要响应式伸缩，又不能窄过某个值（比如输入框不能小于 200px），minmax() 是唯一干净解法。它不是“可选”，而是 auto-fit 场景下的刚需。
例如三列布局中，中间内容列希望在小屏下至少 220px，大屏下均分剩余空间：grid-template-columns: 120px minmax(220px, 1fr) 100px。这比写媒体查询+重设 grid-template-columns 更轻量、更可靠。
立即学习“前端免费学习笔记（深入）”；
-
minmax(min, max)的max可以是1fr、300px或fit-content(400px)，但别写auto—— 它在minmax()里行为不可控 - 打印 PDF 时，
minmax()仍被 Chrome DevTools 和 wkhtmltopdf 正确解析，而flex或calc()在打印上下文中常失效 - 注意：IE 不支持
minmax()，如需兼容 IE11，得降级为固定列宽或 JS 补丁
gap 不影响列宽计算，但会改变实际可用空间
gap 看似只是加间距，但它真实参与网格容器的可用宽度分配。比如容器宽 800px，设 gap: 20px 且三列，则两处列间 gap 共占 40px，真正分给列的只有 760px。
这意味着：如果你按 800px 设计了 200px 1fr 200px，实际 1fr 分到的是 800px - 200px - 200px - 40px = 360px，而不是直觉上的 400px。这个差额在紧凑布局中极易引发溢出或换行。
- 调试时打开浏览器开发者工具，勾选“显示网格线”，能直观看到
gap占位 - 不要在
grid-template-columns里手动减去gap值——Grid 自动处理，硬算反而错 - 若某列内容超宽（如长文本无换行），
white-space: normal和overflow-wrap: break-word比调列宽更治本
嵌套 Grid 是处理“局部不等宽”的安全做法
整个页面不需要所有列都统一规则。比如主区用三列等宽，但其中某个卡片内部要左窄右宽（如图标 + 描述文字），这时不该强行把整页 grid 改成不等宽，而是让那个卡片自己 display: grid，独立定义 grid-template-columns: 40px 1fr。
嵌套不是炫技，是隔离复杂度。外层 Grid 控制宏观节奏，内层 Grid 解决微观对齐，互不影响。
- 嵌套时子网格的
gap不继承外层，必须显式设置 - 避免三层及以上嵌套——调试成本陡增，可读性断崖下跌
- 子网格项若需跨列，优先用
grid-column: span 2，而非硬写grid-column-start / grid-column-end线号，后者易随列数变更失效
不等宽的本质不是“怎么拉伸”，而是“哪部分该固定、哪部分该让渡”。写错一行 grid-template-columns 就可能让整组表单项错位，而这种错位在移动端或打印 PDF 时才暴露——那时再查，往往已嵌套了四层 div。
