写了 display: grid 却没效果，根本原因是未定义 grid-template-columns 创建列轨道；grid-column 依赖显式列线，无列定义则定位失效；响应式推荐 repeat(auto-fit, minmax(250px, 1fr))；图片需控制 object-fit、transform 和 display:block；间距必须用 gap 而非 margin。
写了 display: grid 却没效果？不是代码写错了，而是你漏掉了最关键的一步：没定义列轨道。网格布局不是“设了就自动排好”，它必须有明确的列线才能定位。
为什么 grid-column: 1 / 3 完全不生效
根本原因：容器没写 grid-template-columns，浏览器压根没生成第1、第2、第3条垂直网格线。display: grid 只是开启上下文，不是魔法——没有列定义，grid-column 就像给不存在的门编号。
- 临时加
border: 1px solid red到容器上，如果看不到任何列被渲染出来，说明轨道没建起来 - 哪怕只想要“自适应分列”，也得写
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) -
grid-auto-columns和grid-auto-rows是兜底机制，只对超出模板范围的隐式网格起作用，不能替代显式定义
新手最安全的响应式列定义写法
别用 auto-fill，也别写死 repeat(3, 1fr)——小屏会溢出，大屏会留白。真正能自适应的只有一种组合：
-
repeat(auto-fit, minmax(250px, 1fr))：手机下只显示1列，平板自动变2列，桌面撑到4–5列，空列直接收缩 -
minmax(250px, 1fr)比纯1fr更稳：保证最小可用宽度，避免图片被压扁或文字挤成一团 - 绝对不要混用
%和fr，比如50% 1fr，百分比基准不确定，极易错位
图片画廊必须处理的三个视觉陷阱
光靠网格列还不够，图片本身会破坏对齐和比例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover失效？先检查父容器（如.gallery-item）有没有显式高度或aspect-ratio；只给<img>设width: 100%+height: auto，cover 就不起作用 - hover 缩放卡顿？别动
width/height，统一用transform: scale(1.05)，并配合父容器overflow: hidden -
<img>默认是inline元素，带文字基线间隙，导致网格行高异常——必须加display: block
间距控制只用 gap，别碰 margin
gap 是网格原生属性，不塌陷、不重排、不依赖子元素类型；而用 margin 做间隔，最后一行/列必然多出空白，响应式切换时还会错位。
- 写
gap: 12px就够了，同时控制行列间距；grid-gap已废弃，但可作为 Safari 旧版本回退 - 容器若有
padding: 16px，别把gap改成8px来“视觉对齐”——那会让图片离边框太近，实际留白不一致 - 某项要绝对定位（比如浮层遮罩），它自动脱离网格流，也不参与
gap计算，不用额外清除
真正卡住新手的从来不是语法，而是“以为写了 display: grid 就万事大吉”的错觉——列轨道必须显式声明，图片尺寸必须受控，间距必须用 gap。这三个点没踩准，再漂亮的 CSS 也会在真实设备上崩掉。
