Grid布局中grid-template-areas怎么写才不踩坑
用grid-template-areas命名区域看似直观，但实际写错一个引号、多一个空格、漏掉点号占位，整个布局就失效——浏览器不会报错，只会默默回退到默认流式排版。
它本质是字符串映射，每一行代表一行网格轨道，每个单词对应一个grid-area值，点号.表示空单元格。必须严格对齐列数，否则解析失败。
- 所有行的列数必须一致：比如第一行写了
"header header sidebar"（3列），后面每行也得是3个词或. - 区域名不能含空格或特殊字符，
main-content合法，main content非法 - 点号
.必须单独成词，"header . sidebar"正确，"header..sidebar"无效 - 搭配
grid-area使用时，元素必须显式声明grid-area: "header"，不能只靠类名
示例：
display: grid; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; grid-template-rows: auto 1fr auto; grid-template-columns: 200px 1fr 300px;
为什么grid-auto-flow设成dense反而让布局更乱
grid-auto-flow: dense不是“自动填满空隙”的万能开关，它是放弃源顺序、强行把后续项塞进前面留下的小空洞里——这在响应式或动态内容场景下极易引发视觉错位。
立即学习“前端免费学习笔记（深入）”；
比如你用grid-column: span 2跨两列后，下一项本该从第3列开始，但dense会把它硬塞进第1行第1列那个已被跨列项跳过的空位，结果标题和正文叠在一起。
- 仅在完全静态、内容尺寸固定且你明确需要紧凑填充时考虑
dense - 绝大多数情况保持默认
row（或省略），让Grid按HTML顺序逐行填入 -
dense对grid-row/grid-column显式定位的项无效，只影响自动放置的项 - 它不影响
grid-template-areas定义的区域，那部分始终优先
minmax()和clamp()在Grid列宽控制中的真实分工
minmax(300px, 1fr)是Grid响应式的基石，而clamp(300px, 50vw, 800px)是CSS4新增的弹性计算函数——两者混用常见，但职责完全不同。
minmax()解决的是“这一列至少要多宽、最多能占多少”，用于grid-template-columns中定义轨道；clamp()则是单个值的区间限制，适合给width或flex-basis用，不能直接当轨道尺寸。
- ✅ 正确：
grid-template-columns: minmax(300px, 1fr) 2fr; - ❌ 错误：
grid-template-columns: clamp(300px, 50vw, 800px) 2fr;（浏览器忽略该值） - ✅ 可行组合：
grid-template-columns: minmax(clamp(300px, 50vw, 800px), 1fr) 2fr;（把clamp嵌在minmax里） -
minmax()在IE中无支持，clamp()在Safari 15.4+才稳定，生产环境需查CanIUse
Grid布局中justify-items和justify-self谁会生效
当父容器设了justify-items: center，子元素又设justify-self: start，后者一定胜出——justify-self是单个项目的覆盖指令，优先级高于容器级的justify-items。
这个覆盖逻辑容易被忽略，尤其在组件化开发中：父组件统一居中，某个子卡片想左对齐，只改自己的justify-self就行，不用动父级配置。
-
justify-items作用于所有子项（除非被justify-self覆盖） -
justify-self只能用在Grid子项上，对Flex子项无效 - 若子项同时是Grid容器（嵌套Grid），它的
justify-items只影响它自己的子项，不向上冒泡 - 注意
justify-self在IE中完全不支持，如需兼容，改用margin-left: auto; margin-right: 0;模拟
