现代布局应直接用 display: grid，以 repeat(12, 1fr) 或 auto-fit + minmax 实现12列语义；子项用 grid-column 控制跨列，避免 width 和 margin 干扰；gap 替代 margin 管理间距；摒弃 class 命名和 IE 兼容思维。
直接用 display: grid，别绕路写浮动、Flex 包裹或仿 Bootstrap 的 class 命名体系——现代浏览器全支持，代码更短，响应式更稳。
grid-template-columns 怎么设才真正适配 12 列语义
“12 列”不是指死写 repeat(12, 1fr)，而是为子元素提供按比例占位的能力。关键在定义列轨道的**可组合性**：
- 基础写法：
grid-template-columns: repeat(12, 1fr)—— 所有列等宽，子项用grid-column: span 3即占 3 列（相当于 Bootstrap 的col-3） - 更实用的响应式写法：
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)))—— 浏览器自动算最多能放几列，每列不窄于 220px，超出则换行，天然支持 12→8→4→1 的收缩逻辑 - 避免用
px或百分比硬写列宽（如8.33%），Grid 的fr单位会自动均分剩余空间，不受 padding/border 影响
子元素怎么“占 N 列”而不写 JavaScript
不需要 col-4 这类 class，也不需要 JS 计算宽度。Grid 布局中，子项通过 grid-column 控制跨列：
-
grid-column: span 4→ 占 4 列（从当前位置向右跨 4 格） -
grid-column: 2 / 7→ 从第 2 条线开始，到第 7 条线结束（即占 5 列） - 若父容器是
repeat(12, 1fr)，那么span 6就是“半屏”，span 12就是满宽 —— 语义清晰，无需查表换算 - 注意：不要给子项设
width，它会和grid-column冲突，导致错位或溢出
gap 和 margin 混用会翻车吗
会，而且很隐蔽。用 gap 是唯一推荐方式：
立即学习“前端免费学习笔记（深入）”；
-
gap: 16px同时控制行列间距，不触发外边距合并（margin collapse），子项内边距、边框完全不影响布局对齐 - 如果额外给子项加
margin，会导致实际间距变成gap + margin，尤其在响应式换行时，最后一行可能被顶出容器 - 旧方案里靠
row负 margin 修正列间隙（如 Bootstrap 的margin-left: -15px），在 Grid 中纯属多余，删掉 - 兼容性提醒：IE 不支持
gap，但 IE 已淘汰；如真需兼容，可用padding配合box-sizing: border-box模拟，不推荐回退到 float
真正的难点不在写法，而在放弃“必须写满 12 列”的思维定式——Grid 的列轨道是虚拟线，子项跨几列由内容决定，不是靠 class 数字堆出来的。留空、跨列、重叠（用 grid-row）、甚至用 grid-area 命名区域，都比维护一套 col-X 的 class 更轻量、更可持续。
