响应式网格需用 repeat(auto-fit, minmax(300px, 1fr))替代固定列数，配合 gap 和 aspect-ratio:1/1（或 padding-bottom hack）确保宽高比，图片加 object-fit:cover 及宽高 100% 防拉伸跳动，卡片设 padding 和 cursor:pointer 保障点击体验。
grid-template-columns 设死列数会破坏响应式
直接写 grid-template-columns: repeat(3, 1fr) 看似简单，但一缩放就露馅：小屏下三列挤成窄条，图片变形，文字叠在一起。这不是“固定列数”的问题，而是没让列数随容器宽度动态调整。
- 用
minmax(300px, 1fr)替代固定值，告诉浏览器“每列至少 300px，多余空间均分” - 搭配
auto-fit（不是auto-fill）——它会收缩空轨道，避免生成无内容的列 - 完整写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
gap 和 aspect-ratio 配合才能撑开网格项
光靠 Grid 容器设置列宽，子项默认不占满高度，尤其图片加载前会塌陷，导致网格错位。Instagram 那种整齐方格，本质是靠统一宽高比 + 间隙控制出来的。
-
gap: 8px必须设在容器上，不能只靠 margin 模拟，否则响应式时容易溢出 - 每个子项加
aspect-ratio: 1 / 1，强制正方形，且不依赖图片尺寸 - 如果兼容性要求高（比如要支持 Safari 15.4 以下），改用 padding-bottom hack：
position: relative; &::before {padding-bottom: 100%; display: block; content: "";}，再把图片绝对定位进去
图片加载闪动和拉伸必须用 object-fit 控制
网格项里直接塞 <img>，默认会拉伸变形，而且首屏加载时高度为 0，网格整体跳动。这不是 Grid 的锅，是图片渲染行为没管住。
- 给图片加
width: 100%; height: 100%; object-fit: cover;，确保填满且不畸变 - 别用
background-image模拟——它无法被屏幕阅读器识别，也不支持懒加载属性loading="lazy" - 如果后端返回图尺寸差异大（比如有的 1080×1350，有的 1080×810），
cover会裁剪，想保全貌可换contain，但得接受留白
移动端点击区域太小影响体验
Grid 布局本身不处理交互，但 Instagram 主页每个卡片都要能点进详情页。纯靠 grid-column 或 grid-row 控制跨度，很容易让点击热区缩水。
立即学习 “ 前端免费学习笔记（深入）”；
- 卡片容器设
cursor: pointer，并确保有足够内边距：padding: 4px（别只靠 gap 分隔） - 避免在卡片内嵌套多层
div再加事件监听——直接给最外层 grid item 绑 click，减少事件委托层级 - 真机测试时重点看手指点击是否触发：iOS Safari 对
click有 300ms 延迟，建议加touchstart或用pointer-events: auto显式开启
真正卡住人的不是 grid 写法，而是图片加载节奏、宽高比 fallback、以及 touch 设备上那几像素的点击容错——这些地方一松懈，网格看着整齐，用起来就卡顿漏触
