grid是二维布局，columns是一维分栏；grid精准控制子元素位置，columns仅切分内容流；grid适用于ui组件排列，columns适合长文本分栏。
Grid 是二维布局，Columns 是一维流式分栏
Grid 本质是“画格子”，你定义行和列，再把元素精准塞进某个单元格甚至跨格；Columns 则只是把一块内容（比如一段文字或一个 div）像报纸一样切成多栏，它不控制子元素位置，只影响内容流的视觉断行。
常见错误现象：用 columns: 3 想实现三列卡片布局，结果卡片被强行截断、换行错乱，甚至出现文字从中间劈开——因为 Columns 从不把子元素当独立块处理，它只切内容流。
- 使用场景：Columns 适合长文本分栏（如文章、法律条文）、纯视觉装饰性分隔；Grid 才该用于 UI 组件排列（导航栏、相册、仪表盘）
- 兼容性影响：Columns 在 Safari 和旧版 Chrome 中对
break-inside: avoid支持不稳定，卡片常被劈成两半；Grid 的display: grid在现代浏览器（含 iOS 16.4+、Android Chrome 110+）已无兼容性顾虑 - 性能差异：Columns 触发重排成本低，但无法响应式重排子项；Grid 虽初始计算稍重，但通过
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))可零 JS 实现真正弹性列数
grid-template-columns 和 column-count 看似相似，实则控制对象完全不同
grid-template-columns 定义的是容器内“轨道”的数量与尺寸，每个轨道可承载任意子元素；column-count 定义的是“内容流被切成几份”，它不创建新容器，也不改变子元素的盒模型。
典型踩坑：给一个 div 同时设 display: grid 和 columns: 3，结果 Grid 的行列定义完全失效——因为 columns 会让整个容器退化为分栏上下文，Grid 布局引擎直接不启动。
立即学习“前端免费学习笔记（深入）”；
- 参数差异：
grid-template-columns: 1fr 2fr auto允许混合单位、响应式函数；column-count: 3只接受整数，column-width才能设像素值，且最终列数由宽度反推，不可控 - 子元素行为：Grid 项目默认占满所在轨道；Columns 下的子元素（如
article）若没设break-inside: avoid，大概率被跨栏切割 - 调试提示：用浏览器开发者工具选中元素，如果看到“Grid”标签页可交互调整线位置，说明是 Grid 生效；如果只有“Layout”里显示 column rule，那就是 Columns 在起作用
鼠标样式在 Grid 项目上失效？大概率是 display 或 pointer-events 搞错了
Grid 项目默认是块级，但如果你给它设了 display: inline 或 display: contents，它就失去盒模型，cursor: pointer 会失效；更隐蔽的是父容器设了 pointer-events: none，子项全被屏蔽。
常见错误现象：卡片用了 grid-column: span 2 跨列，但 hover 效果只在左半生效，右半没反应——其实是跨列后元素未显式设高，内容塌陷导致右半区域无点击热区。
- 实操建议：跨列/跨行的项目务必设
min-height或height，避免因内容空缺导致热区丢失 - 安全写法：
.card { cursor: pointer; min-height: 120px; }，比依赖内容撑开更可靠 - 兼容性注意：IE11 不支持
cursor在display: contents元素上生效，若需兼容，改用visibility: hidden配合伪元素遮罩替代
gap 和 column-gap 名字像，但作用域和继承规则天差地别
gap 是 Grid 专属属性，只作用于网格轨道之间；column-gap 是多列布局属性，也用于 Flex（Flex 从 2021 年起支持），但它在 Grid 容器里会被 gap 覆盖，且不触发 Grid 的自动轨道对齐逻辑。
容易忽略的细节：当你用 grid-template-areas 定义语义区域，再设 gap: 1rem，这个间隙会出现在所有相邻区域之间；但若误用 column-gap: 1rem，它只在列方向生效，行方向间隙为 0，布局立刻失衡。
- 优先级规则：
gap>row-gap/column-gap；Grid 容器中设了gap，再设column-gap无效 - 响应式陷阱：用
gap: clamp(0.5rem, 2vw, 1rem)比固定值更安全，避免小屏下间隙吞噬内容空间 - 老项目迁移提醒：若原用 Flex +
column-gap，升级 Grid 后必须改用gap，否则列间隙保留，行间隙消失，视觉错位
align-items）和 Columns 的 column-fill 完全不在一个维度上，混用时连报错都不会有，只会静默失效——这种隐性不兼容，才是最需要提前意识到的。 
