必须设 display: grid，否则 grid-template-areas 等所有 grid 属性均不生效；常见错误是父容器遗漏该声明，且 grid-area 值须与引号内字符串逐字符一致，ie11 不支持，safari 10.1+ 才稳定支持。
必须设 display: grid，否则所有 grid-template-areas 或 grid-template-rows 都不生效——这是 90% 布局失败的根源。
为什么 grid-template-areas 写了却没效果
最常见错误不是语法错，而是父容器漏了 display: grid。Grid 是容器级布局，子元素加 grid-area、header 标签自己加 display: grid 都无效。
- 检查父容器（如
.app-layout）是否明确写了display: grid -
grid-template-areas中每行必须用引号包裹，空格分隔列，例如："header header" "nav main" "footer footer" -
grid-area值必须与引号内字符串**逐字符一致**：大小写、空格、连字符都不能错；grid-area: sidebar和grid-area: "sidebar "（末尾空格）不匹配 - IE11 完全不支持
grid-template-areas，Safari 10.1+ 才稳定支持多行字符串
grid-template-rows: 60px 1fr auto 为何 Main 不自适应
1fr 不是魔法，它需要容器有确定高度作为基准。若父容器高度为 auto，1fr 就无从分配。
- 根容器必须设
height: 100vh或通过 JS 动态传入高度（如 Vue/React 中父组件约束高度） -
min-height: 0必须加在main区域上，否则 Flex/Grid 嵌套时可能继承父级min-height: auto导致撑不开 - 若
Main内容超长，必须显式加overflow-y: auto，否则会触发页面整体滚动 +Main内部滚动（双滚动） - 避免混写单位，比如
1frpx或60（漏px），整行轨道会塌陷
如何用媒体查询切换桌面/平板/手机三套布局结构
不要在每个断点里重复写 grid-template-columns 和 grid-template-rows，改用 grid-template-areas 统一语义区域，再按需重排。
- 桌面端：
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer" - 平板（≤1024px）：
@media (max-width: 1024px) { grid-template-areas: "header" "nav" "main" "sidebar" "footer"; } - 手机（≤768px）：
@media (max-width: 768px) { grid-template-areas: "header" "main" "footer"; }，此时nav和sidebar可设grid-area: .或display: none - 每行引号内用
.表示空单元格，不能留空或写null -
grid-template-areas不支持局部覆盖，必须重写整行结构
repeat(auto-fit, minmax(250px, 1fr)) 比固定列数更可靠
后台卡片列表、仪表盘模块等场景，列数应由容器宽度自动决定，而非硬编码 repeat(4, 1fr)。
-
auto-fit：只创建有内容的列，并拉伸填满容器；auto-fill会保留空轨道，小屏下易出空白列 -
minmax(250px, 1fr)表示每列最小 250px，最大占等分空间；低于 250px 时自动换行 - 避免写
minmax(240px, 240px)代替固定值，Safari 可能渲染异常 -
gap必须设在容器上，它不继承；子容器若也是 Grid，需单独设自己的gap - 若卡片内容高度不可控，
grid-template-rows别写死像素，改用auto或minmax(min-content, max-content)防截断
真正难的是让 Main 在嵌套路由、动态侧边栏折叠、表格高度变化等真实场景中始终稳定撑满且可滚动——这时候光靠 CSS 不够，得结合 min-height: 0、overflow-anchor: none 和 JS 监听容器尺寸微调。但第一步，永远是确认 display: grid 是否真的生效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
