CSS网格实现的个人作品集展示_不规则网格带来的设计感

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 的计算链

事情说清了就结束。不规则网格真正难的不是写几行 CSS，而是每次改动都要同步检查区域名、行列定义、尺寸依赖和浏览器兼容链——少一环，视觉就断掉。