用 grid-template-columns: repeat(3, 1fr) 实现三列等宽网格
Instagram个人主页那种整齐的三列图片流，核心就是让容器在任意宽度下都保持三列、等宽、无间隙塌陷。直接写 repeat(3, 1fr) 最稳妥——它不依赖具体像素值，也不受子项内容撑开影响，比 33.333% 或 calc(100% / 3) 更可靠。
注意：必须配合 grid-auto-rows: 1fr 或显式设定行高（如 grid-auto-rows: 200px），否则高度由图片自身决定，列齐但行不齐，视觉上还是错乱的。
-
1fr是比例单位，不是固定长度，所以缩放窗口时列宽自动重算，不会出现最后一列被挤换行 - 如果父容器有
padding，记得加box-sizing: border-box，否则 padding 会额外占空间，导致第三列掉行 - 别用
display: inline-grid，它会受前后内联元素影响，导致宽度计算异常
用 gap 控制图片间距，而不是 margin
Instagram那种“图片之间有空隙，但边缘不留白”的效果，gap 是唯一干净解法。用 margin 给每个子项加边距，会导致首尾列外侧也多出空白，还得额外写负 margin 去抵消，极易出错。
gap 只作用于网格轨道之间，天然避开容器边缘。设成 gap: 4px 或 gap: 0.25rem 都行，但注意：IE 完全不支持 gap，如果还要兼容，得退回到 margin + :nth-child 伪类清除首尾边距的老方案。
立即学习“前端免费学习笔记（深入）”；
-
gap同时控制行距和列距，写成gap: 4px 8px可以分别设 - 不要把
gap和子项自身的padding混用，容易叠加出意料之外的空白 - 如果图片用
object-fit: cover，确保容器有明确宽高，否则gap看起来会“浮动”——其实是图片高度不一致导致的视觉偏差
图片宽高比不一致？用 aspect-ratio 锁定容器，而非图片本身
Instagram网格里每张图宽高比不同，但显示区域是统一的矩形。靠给 <img alt="CSS如何实现类似Instagram个人主页的网格_利用三列repeat轨道与gap间距" > 加 width: 100%; height: 100% 会拉伸变形；靠 JS 计算尺寸又重又慢。现代解法是给网格子项（即每个卡片容器）设 aspect-ratio: 1 / 1，再让图片在里面居中裁剪。
这样既保证网格结构稳定，又避免 JS 干预。不过 aspect-ratio 在 Safari 15.4+ 和 Chrome 88+ 才支持，老版本需 fallback 到 padding-top 百分比技巧（例如 padding-top: 100% + position: relative + 绝对定位图片）。
- 别给
<img alt="CSS如何实现类似Instagram个人主页的网格_利用三列repeat轨道与gap间距" >直接设aspect-ratio，它只对块级容器生效 - 如果后端返回的图片分辨率差异极大，建议统一用
object-fit: cover+overflow: hidden防止溢出 - 某些 CMS 输出的图片带内联
width/height属性，会干扰aspect-ratio，记得用 CSS 覆盖掉：img { width: 100%; height: 100%; }
响应式断点要慎用 minmax() 替换 repeat(3, 1fr)
小屏设备上硬塞三列会太挤，很多人想用 repeat(auto-fit, minmax(250px, 1fr))) 动态调整列数。但 Instagram 主页其实**不响应式列数**——它在手机上仍是三列（只是图片变小），只在极窄屏（如竖屏 iPhone）才切为两列。强行用 minmax 容易导致列数在 3→2→3 间抖动，尤其滚动时。
更可控的做法是用媒体查询，在特定宽度切列数：@media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); }。这样逻辑清晰，调试方便，且避免了 auto-fit 在 flex/grid 混用时常见的渲染竞态问题。
-
minmax()中的min值若设得太小（如200px），在中等屏幕可能意外触发四列，反而破坏设计意图 - 用
auto-fit时，务必测试空网格项（比如加载中占位符），它可能因无内容而被压缩到 0 宽 - 如果用了 CSS-in-JS 库（如 Emotion），注意部分版本对
repeat()的插值解析有 bug，建议用字符串模板绕过
width 必须有明确约束（比如 max-width: 1200px 或 width: 100%），否则在 flex 容器或绝对定位上下文中，1fr 会失去参照系，整排直接坍缩成一列。 
