css grid 布局需先声明 grid-template-columns 和 grid-template-rows 才生效；仅设 display: grid 无可见网格。gap 替代已废弃的 grid-gap，但对 inline-grid 和脱离文档流元素无效。响应式卡片推荐使用 repeat(auto-fit, minmax(280px, 1fr))，需容器有明确宽度。命名区域（grid-template-areas）提升可维护性，但须每行单词数一致并用 . 占位。网格线从 1 开始编号，fr 分剩余空间，且 html 语义顺序应与视觉流一致。
直接在 index.html 中用 CSS Grid 布局，不需要额外框架或 JS —— 只要父容器设 display: grid，再定义行列结构，布局就生效了。但多数人卡在“写了 grid 却没变化”，根本原因是漏掉了模板声明。
必须先写 grid-template-columns 和 grid-template-rows
只加 display: grid 不会自动产生可见网格；浏览器不知道该分几行几列，网格线压根不存在，后续所有定位（如 grid-column、grid-area）都会静默失效。
-
grid-template-columns: 1fr 2fr auto定义三列：第一列占 1 份剩余空间，第二列占 2 份，第三列自适应内容宽度 -
grid-template-rows: 80px 1fr 60px定义三行：顶部固定高 80px，中间占剩余空间，底部固定 60px - 如果某方向不写模板（比如只写列、不写行），浏览器会按子元素数量自动生成隐式行，但高度为
auto，容易导致高度塌陷或溢出 - 别依赖
grid-template-areas启动布局——它只是语法糖，底层仍需行列结构支撑
gap 替代 grid-gap，且对 inline-grid 无效
grid-gap 已被标准废弃，现在统一用 gap。它同时作用于行和列间距，也兼容 Flexbox，写法更简洁。
- 旧写法
grid-gap: 12px→ 新写法gap: 12px - 若需行列间距不同：
row-gap: 8px; column-gap: 16px -
gap对display: inline-grid完全无效，此时只能用margin模拟间距 - 若网格项用了
float或position: absolute，它会脱离网格流，gap也不起作用
用 minmax() + auto-fit 实现响应式卡片网格
比起写一堆 @media 断点，一行 grid-template-columns 就能搞定多尺寸适配，尤其适合产品列表、仪表盘卡片等场景。
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))表示：每列最小 280px，最大均分剩余空间；尽可能多放列，空轨道自动收缩 -
auto-fill会保留空轨道（哪怕没内容），auto-fit则合并它们，更实用 - 注意：该写法依赖容器有明确宽度（如
width: 100%或max-width），否则可能撑破父级 - 在 Safari 14.1+、Chrome 84+、Firefox 71+ 中稳定支持；IE 完全不支持，需降级方案
命名区域（grid-template-areas）适合复杂仪表盘，但别滥用
当页面结构稳定、区域语义明确（如 header / sidebar / main），用命名区域比线号更直观、易维护。
- 模板字符串中每个单词是一个区域名，每行字符串对应一行布局：
"header header" "sidebar main" - 子元素只需
grid-area: sidebar，无需算线号，也避免因增删项目导致编号偏移 - 但命名区域要求所有行字符串单词数一致，缺位要用
.占位，否则解析失败 - 移动端重排时，可覆盖整个
grid-template-areas值（如改成单列堆叠），比逐个改grid-row更安全
真正容易被忽略的是：网格线编号从 1 开始，不是 0；fr 分的是“减去显式尺寸后的剩余空间”，不是整个容器宽高；还有，HTML 语义顺序应与视觉流一致——否则屏幕阅读器会读错顺序，这点在用 grid-column: -1 或 order 调整位置时尤其关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
