grid-template-areas 对不上位置的主因是字符串行列数不等、区域名拼写错误或缺失 grid-area 匹配，导致声明被忽略；须确保每行引号内单词数一致、用空格分隔、留空用 .、大小写及符号严格匹配。
grid-template-areas 为什么总对不上位置
用 grid-template-areas 布局作品集时，常见错误是字符串里多空格、换行不一致，或某个区域名拼错——浏览器会直接忽略整条声明，退化成默认网格。它要求每行引号内列数严格相等，且所有区域名必须在 grid-area 中真实存在。
- 确保每行引号内单词数量一致，用空格分隔，不能用制表符
-
grid-area值必须和grid-template-areas中的名称完全匹配（大小写、连字符都不能错） - 留空位置用
.占位，但连续多个.会被合并识别为一个空单元格 - 示例：
grid-template-areas: "hero hero hero" "proj1 proj2 ." "proj3 proj3 proj4";——第2行只有两个命名区域，第3个必须用.补齐，否则解析失败
gap 和 justify-items 冲突导致卡片错位
设了 gap: 2rem 后，又加 justify-items: center，结果所有卡片都缩到网格线中间，留出大片空白。这是因为 justify-items 控制的是**网格项内容**在单元格内的对齐，不是网格项本身；而 gap 是单元格之间的间距，两者作用层级不同，混用容易误判布局源头。
- 想让卡片居中显示，优先用
justify-self: center作用于单个article元素，而不是整个容器 - 若需整体居中对齐，改用
justify-content: center（作用于网格容器），它对齐的是整行网格轨道 - 移动端小屏下
gap过大会撑破容器，建议搭配minmax(0, 1fr)配合grid-template-columns使用
grid-row / grid-column 手动定位引发重叠或漏显
给某张作品图加 grid-row: 2 / 4 后，下面的内容被盖住，或者根本没显示——大概率是没设 grid-template-rows 显式定义行高，导致隐式网格行高度为 0，跨行失效。
- 手动跨行跨列前，先确认容器有显式行/列定义，例如：
grid-template-rows: repeat(4, minmax(200px, auto)) -
grid-row: span 2比grid-row: 2 / 4更安全，避免目标起始行不存在时失效 - 调试时临时加
outline: 1px solid red到网格项，能快速看清实际占位范围 - 注意：
grid-column: 1 / -1可让标题横跨所有列，但若列数动态变化（如响应式），需配合grid-auto-flow: dense避免空洞
aspect-ratio + object-fit 在网格项中失效
给作品图容器设了 aspect-ratio: 4/3，图片却还是拉伸变形——因为 object-fit 作用对象是 <img alt="CSS网格实现的个人作品集展示_不规则网格带来的设计感" > 自身，而父容器若没设高度约束（比如靠内容撑开），aspect-ratio 就无基准可依。
立即学习“前端免费学习笔记（深入）”；
- 必须让网格项（如
article）有明确尺寸上下文，推荐用height: 100%或min-height: 200px -
img标签需设width: 100%; height: 100%; object-fit: cover，否则aspect-ratio不触发 - Safari 15.4+ 才完整支持
aspect-ratio，旧版本需回退用 padding-top 百分比 hack - 别在
grid-template-areas的区域里嵌套多层 flex 容器，容易干扰aspect-ratio的计算链
