CSS Grid 是最直接可控的二维布局方案，需用 display: grid 启用，推荐 fr 单位与 minmax() 定义列宽，子项用 grid-column/row 跨行列，响应式用 repeat(auto-fit, minmax())，注意兼容性及与 Flexbox 的职责区分。
CSS Grid 是目前最直接、可控性最强的二维布局方案，适合构建固定结构或响应式网格系统；用 display: grid 就能启动，但关键在如何合理设置 grid-template-columns 和 grid-gap。
怎么定义基础网格容器和列宽
必须显式声明 display: grid 才会触发 Grid 布局，否则所有 grid-* 属性无效。列宽推荐用 fr 单位（fraction），它按比例分配剩余空间，比 px 或 % 更适应内容变化。
-
grid-template-columns: 1fr 2fr 1fr表示三列，中间列占总可用空间的二分之一 - 避免混用
fr和px（如200px 1fr），否则小屏下容易溢出且难以预测行为 - 用
minmax(300px, 1fr)可兼顾最小宽度与弹性伸缩，比单纯写1fr更稳妥
如何让子元素跨行跨列或自适应定位
Grid 的优势在于子项可主动声明位置，不依赖 DOM 顺序。常用的是 grid-column 和 grid-row，它们接受起始/结束线号或关键词（如 span 2）。
-
grid-column: 2 / -1表示从第 2 条线开始，到最后一列线结束（即占满右侧所有列） -
grid-row: span 2让元素向下跨越两行，但前提是父容器有足够行高（由grid-auto-rows或显式grid-template-rows控制） - 不要对子项设
float或display: inline-block，Grid 会忽略这些声明
响应式网格怎么写才不重复写断点
用 repeat() + minmax() + auto-fit 组合，一条声明就能实现“尽可能多列，每列不小于某值”，比媒体查询更简洁。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))是主流写法，小屏单列、中屏双列、大屏三列自动适配 -
auto-fill会预留空轨道，auto-fit则会合并空轨道，实际项目中几乎总是选auto-fit - 如果需要固定列数（比如后台表格），就别用
auto-fit，改用repeat(4, 1fr)配合媒体查询微调
常见报错和兼容性注意点
Grid 在现代浏览器中支持良好（Chrome 57+/Firefox 52+/Safari 10.1+），但 IE 完全不支持 —— 如果必须兼容 IE，不能只靠 Grid 回退，得提前设计双布局方案。
- 控制台报错
Invalid property value多因grid-template-columns写了非法单位（比如漏掉px或拼错fr） - 元素没按预期排列？先检查父容器是否真有
display: grid，再确认子项没被position: absolute拉出文档流 -
gap在旧版 Safari 中需加前缀-webkit-gap，但新版已无需处理
真正难的不是写对语法，而是判断什么时候该用 Grid、什么时候该交给 Flexbox —— Grid 管整体结构，Flexbox 管内部对齐；混用时注意层级关系，别让子项 Grid 容器又套在父项 Flex 容器里却期望继承网格线。
