用 repeat(auto-fit, minmax(160px, 1fr)) 可实现浏览器自动计算列数的真正自适应布局，需避免 minmax 写为 auto、漏写 minmax 或子项设固定宽等常见错误。
用 repeat(auto-fit, minmax(...)) 实现真正自适应列数
这不是“写个 grid-template-columns: repeat(3, 1fr) 再加媒体查询”的替代方案，而是让浏览器自己算该放几列——前提是容器宽度和子项最小尺寸明确。
常见错误是把 minmax(200px, 1fr) 写成 minmax(200px, auto)，后者会让列宽失去弹性约束，auto-fit 就失效了；或者漏掉 minmax()，直接写 repeat(auto-fit, 1fr)，结果所有列强行等分、不换行。
-
auto-fit会合并空轨道（即没有子元素的列），auto-fill则保留空轨道，视觉上可能多出空白列 - 子项必须没设固定宽度（如
width: 200px），否则会撑破网格定义 - 配合
grid-auto-rows: minmax(100px, auto)可控制行高自适应，避免高度塌陷
grid-column 和 grid-row 跨格时为什么常错位
网格线编号从 1 开始，但很多人按数组思维从 0 算起，比如想跨两列却写 grid-column: 1 / 2（只占 1 根轨道），实际应写 grid-column: 1 / 3 或更安全的 grid-column: span 2。
另一个坑是父容器没设 display: grid，或子项用了 float/position: absolute，导致网格定位完全不生效。
立即学习“前端免费学习笔记（深入）”；
- 用
span N比写具体起止线更可靠，尤其在动态内容或响应式下 -
grid-row: span 2不等于 “占两行高度”，而是跨越两行轨道——若某行被设为height: 50px，那它就只高 50px，不会自动撑开 - Chrome DevTools 的 Layout 面板里勾选 “Show line numbers” 能直观看到网格线位置
移动端小屏下 auto-fit 不缩列？检查 minmax() 的最小值
如果小屏时列数没减少，大概率是 minmax() 第一个参数设得太大，比如 minmax(300px, 1fr) 在 320px 宽屏幕上连一列都塞不下，浏览器只能把所有子项堆成一列（即 fallback 行为），但视觉上像“没响应”。这时它其实已按规则运行，只是你预期的“多列变少列”没出现。
真实场景中，minmax(160px, 1fr) 更适合卡片类布局：保证卡片最小可读宽度，又能在大屏铺开。
- 别用
em或rem做minmax()的最小值，字体缩放会干扰列数计算 - 用
clamp(160px, 25vw, 300px)替代固定最小值，能兼顾窄屏与大屏比例 - 某些安卓 WebView 对
auto-fit支持不全，可降级为@supports not (grid-template-columns: repeat(auto-fit, ...)) { ... }
Grid 布局中 gap 会影响子项 margin 吗
不影响。CSS Grid 的 gap 是轨道之间的“间隙”，不是子项的外边距；子项自身的 margin 仍存在，且可能和 gap 叠加造成意外留白。
典型现象：卡片设置了 margin: 10px，又加了 gap: 12px，结果卡片之间看起来有 22px 间距，但顶部/底部/左右边界却不对称——因为只有相邻轨道间有 gap，而边缘无对应轨道。
- 统一用
gap控制间隔，子项去掉margin，避免叠加和边界错位 -
gap不支持百分比值，但可用calc()组合，如gap: calc(1vw + 8px) - Flex 布局中
gap行为一致，但老版本 Safari 需加-webkit-gap
真正难的是让不同屏幕下的列数变化“顺滑”，而不是突变——这得靠 minmax() 的阈值设计，不是靠 JS 监听 resize。多数人卡在这一步，反复调数字，却没意识到最小宽度和视口比例的关系才是关键。
