display: grid 开启现代网格布局，但需注意 display: inline-grid 的行内特性、ie 兼容需 -ms- 前缀、fr 单位按剩余空间分配、gap 在旧 safari 中需拆分为 row-gap/column-gap。
直接用 display: grid 就能开启现代网格布局，但不是所有写法都等效，也不是所有浏览器都认同一个语法。
display: grid 和 display: inline-grid 的区别
两者都创建网格容器，但行为不同：
-
display: grid生成块级容器，独占一行，宽度默认撑满父容器 -
display: inline-grid生成行内级容器，可以和其他行内元素并排，宽度由内容或显式width决定 - 若子项需要响应式排列且不希望被换行打断，优先选
grid；若嵌入段落或按钮组中需保持行内流，才考虑inline-grid
IE10/11 必须加 -ms- 前缀才能生效
IE10–11 只支持旧版语法，display: grid 完全无效，必须写成：
#container {
display: -ms-grid;
-ms-grid-columns: 1fr 2fr;
-ms-grid-rows: auto 1fr;
}
注意三点：
- 所有属性都要带
-ms-前缀，包括-ms-grid-column、-ms-grid-row -
grid-template-columns这类新属性在 IE 中完全不识别，不能混用 - 如果项目需兼容 IE，建议用 Autoprefixer + postcss-grid-kiss 插件自动降级，手动维护两套规则极容易漏掉子项定位
grid-template-columns / rows 中 fr 单位的常见误用
fr 是“fraction”，不是像素，也不是百分比——它只在剩余空间里按比例分配，且不参与初始尺寸计算。
- 写成
grid-template-columns: 1fr 1fr 1fr≠ 三等分：如果某列内容有固定宽的图片（比如min-width: 300px），那它会先占掉至少 300px，再把剩下的空间三等分 -
1fr 2fr auto中的auto不会压缩，而是按内容自然伸展，可能导致整体溢出容器 - 更安全的写法是搭配
minmax()：例如grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，既响应式又防溢出
gap 属性在老版本 Safari 中的兼容性陷阱
gap 在 Safari 14.1 之前不支持，且不接受前缀。错误写法如 -webkit-gap: 10px 会被忽略。
- 若需支持 Safari ≤14，必须拆成
row-gap和column-gap单独写 - 不要依赖
gap来控制关键间距——比如卡片边距，一旦失效会导致视觉坍塌；可额外加padding或margin保底 - CSS 自定义属性无法动态切换
gap值（Safari 15.4 才开始支持），想做主题化间距得靠 JS 注入 class
真正麻烦的不是怎么写第一行 display: grid，而是后续每一条轨道定义、每一处跨格、每一个隐式网格的尺寸控制——它们共同决定布局是否在缩放、换字体、切语言时依然稳定。别迷信“一次写完就完事”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
