Grid 布局现在就得用，尤其需二维控制、少于3个响应断点或突破Flexbox单轴限制时；grid-template-areas须每行独立引号包裹，区域名须与grid-area严格一致；显式定义grid-template-columns更安全，span后不可跟负数；IE11需完全独立的-ms-grid规则，不可混用；一维场景硬套Grid反增维护成本，subgrid在Safari中尚未支持。
Grid 布局不是“未来可能用”，而是现在就得用——尤其当你需要真正二维控制、响应式断点少于 3 个、或要绕过 Flexbox 的单轴限制时。
grid-template-areas 为什么总渲染成一行？
常见错误是把 grid-template-areas 写成单行字符串，比如 "header header" "main sidebar" —— 实际上 CSS 不认换行符，它会当做一个连续字符串处理，导致所有区域被压缩进第一行。
- 必须用换行 + 引号包裹每行，且每行引号独立：
grid-template-areas: "header header" "main sidebar" "footer footer"; - 每个区域名必须严格匹配子元素的
grid-area值，大小写、空格、连字符一个都不能错 - 未声明的区域名（比如拼错成
"hedear"）会被静默忽略，布局塌缩但不报错
grid-column / grid-row 的 span 语法容易误用
grid-column: 2 / span 3 看似直观，但很多人卡在“起始线编号从哪来”——它不是从元素自身位置算，而是从容器的显式网格线编号出发，而隐式生成的线（比如自动新增的列）不会参与编号。
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
- 显式定义列数更安全：
grid-template-columns: repeat(12, 1fr)，再用grid-column: 3 / span 4明确占 4 列 -
span后面不能跟负数，span -2无效；想反向跨区得写成grid-column: 5 / 3 - 在
grid-auto-flow: dense下，span可能触发重排，导致视觉顺序和 DOM 顺序不一致
IE11 的 -ms-grid 兼容写法根本不能直接映射 Grid 规范
别信“加个前缀就能跑”的说法。-ms-grid-columns 和 grid-template-columns 的语法逻辑完全不同：前者是空格分隔的轨道尺寸，后者支持函数、重复、minmax；而且 -ms-grid-row 只接受单个数字，不支持 / 分隔的起止线。
立即学习“前端免费学习笔记（深入）”；
- 真要兼容 IE11，得写两套：标准 Grid + 完全独立的
-ms-grid-规则，不能混用 -
grid-gap在 IE11 里必须拆成-ms-grid-row-gap和-ms-grid-column-gap，且只接受固定值（不支持1rem或calc()） - 千万别对同一个容器同时写
display: grid和display: -ms-grid，IE11 会忽略后者
Grid 最难的不是写出来，是判断什么时候不该用它——比如表单字段对齐、文字环绕图片这类一维场景，硬套 Grid 反而增加维护成本。还有，subgrid 虽已进主流浏览器，但 Safari 目前仍不支持，凡涉及嵌套网格深度控制的地方，得提前留降级路径。
