grid-template-areas 本身不响应式，需配合媒体查询实现断点布局；每行列数须一致并用.占位；区域名禁用中划线；gap仅在display:grid生效且不可用百分比；图片和长文本须设宽高与换行；auto-fit+minmax更适卡片看板。
grid-template-areas 必须配 media query 才能响应式
只写 grid-template-areas 不会自动适配屏幕尺寸——它只是静态命名映射，浏览器不会根据视口宽度重排区域位置。小屏上所有区域硬挤在一行，出现横向滚动或内容重叠，是典型症状。
正确做法是：先用媒体查询定义最小断点（如手机），写单列堆叠结构；再逐级用 @media (min-width: 768px) 和 @media (min-width: 1024px) 覆盖为多栏布局。DOM 中的 grid-area 值（如 "header"、"main"）保持不变，变的只是父容器的 grid-template-areas 字符串。
- 每行字符串列数必须一致，缺位用
.占位（例如"header header"和"nav main ."是非法的，第二行少一列） - 区域名含中划线（如
main-content）会导致整条声明失效，必须用下划线或纯字母数字 - 移动端优先写法示例：
grid-template-areas: "header" "nav" "main" "aside" "footer";
gap 和 display: grid 缺一不可
很多人把容器设成 display: inline-grid，再加 gap: 12px，结果 Safari 15.4 之前完全不生效，视觉上卡片紧贴在一起。这是因为旧版 Safari 只支持 gap 在 display: grid 上工作，inline-grid 被忽略。
另外，gap 必须是固定值（如 12px、1rem），不能用百分比或 em。否则在 Safari 上可能出现“缝隙抖动”——重绘时间隙忽大忽小。
立即学习“前端免费学习笔记（深入）”；
-
gap: 12px是安全起点：手机够呼吸，桌面不空洞 - 避免
gap: 1rem：根字体缩放时会破坏网格节奏 - 别用
margin模拟间距：它不参与 Grid 轨道计算，小屏下容易导致列宽误判、卡片突然塌陷
卡片内子项要主动退让，不能依赖 Grid 拦着
Grid 分配的是轨道，不是内容边界。一张没设 max-width: 100% 的图片、一个没加 overflow-wrap: break-word 的长 URL，都会从内部撑破网格项，让整行错位——“无缝感”就从那个点开始撕裂。
-
img必须加width: 100%; height: auto;，否则按原始尺寸渲染 - 文字长单词（如
https://example.com/very-long-path-name）需overflow-wrap: break-word; - 卡片内若用 Flex 布局，其子项默认有
min-width: auto，得显式写min-width: 0;防止拉伸 - 统一用
aspect-ratio: 4/3或外层div+overflow: hidden控制图形单元高宽比
auto-fit + minmax() 更适合卡片类看板
如果看板里全是指标卡片，且内容长度不一，硬套 grid-template-areas 会很累：每个断点都要重写区域字符串，还要手动处理跨列（如汇总卡用 grid-column: span 2）。这时候改用 repeat(auto-fit, minmax(320px, 1fr)) 更轻量。
它让浏览器自动算列数：最小列宽防压缩溢出，1fr 均分剩余空间。auto-fit 还会收缩空轨道并拉伸填充，比 auto-fill 更适合响应式场景。
- 最小列宽建议从
240px起步（兼容 iPhone SE），再按内容上浮到280px或320px - IE 不支持
auto-fit，需 fallback 到媒体查询方案 - 卡片高度不一致时，默认
align-items: stretch会让短卡片被拉高，加align-self: start对齐顶部即可
repeat(auto-fit, minmax())，而是所有子项都得“守规矩”：不抢空间、不锁尺寸、不绕过 box-sizing: border-box。一旦漏掉一张图的 max-width，或某个标题忘了 overflow-wrap，整个网格的节奏就从那个点开始偏移。 
