grid-auto-rows: minmax(72px, auto) 更稳，因其强制每行最小高度72px防塌陷，内容少时不收缩、多时自动撑开；避免auto在ios15.4前塌成一线，也规避硬编码行数导致溢出。
移动端长列表用 CSS Grid，不是为了“炫技”，而是解决 Flexbox 在高度不一致、换行错位、对齐失控时的真实卡点。关键不在 grid-template-columns 写得多 fancy，而在控制隐式行、约束子项、避开 Safari 旧版坑。
为什么 grid-auto-rows: minmax(72px, auto) 比 height: auto 更稳？
长列表里每项高度不同（有的带图、有的纯文字），Grid 默认按 tallest item 拉高整行，其他项被撑开留白——这不是 bug，是 align-items: stretch 的默认行为。
-
grid-auto-rows: minmax(72px, auto)强制每行最小高度 72px（约 5 行文本+图标空间），内容少时不塌缩，内容多时自动撑开 - 别写
grid-auto-rows: auto：在 iOS 15.4 之前会塌成一条线，列表直接“消失” - 避免
grid-template-rows: repeat(100, 1fr)：硬编码行数会让第 101 项掉出可视区，且无法滚动
如何让“加载更多”按钮跨整行且不卡在中间？
常见错误是给按钮加 grid-column: 1 / -1 后发现它悬浮在某行中间、上下留白异常——本质是没处理隐式网格行的默认高度。
- 容器必须设
grid-auto-flow: row（默认值，但显式写出更稳妥） - 按钮自身加
grid-column: 1 / -1+justify-self: center，避免全宽拉伸导致文字换行 - 如果按钮前需要分隔线，用
border-bottom或伪元素::after并设grid-column: 1 / -1，比插空 div 更轻量 - 别给按钮设
margin-top: auto：Grid 下它不会推到末尾，反而可能触发隐式行错位
为什么 auto-fit + minmax(280px, 1fr) 在真机上有时只出一列？
不是代码错了，是 gap 和 padding 吃掉了可用宽度。浏览器按 containerWidth - (gap × (columns - 1)) 计算单列最大可用宽，375px 屏下减去两个 12px gap，只剩 351px，再除以 2 是 175.5px —— 不够塞第二列。
- 小屏优先写
gap: 8px，而非 12px 或 16px；大屏再用媒体查询上调 -
minmax()第一个参数别设太激进：280px 适合含 200px 图的卡片，纯文字列表可降到 240px - 测试时关掉开发者工具的“模拟设备宽度”，真机横竖屏切换看实际渲染——iOS Safari 对
auto-fit的解析在横屏下偶尔滞后 - 旧版 Safari（iOS 13.x）建议降级：
@supports not (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) { ... }里补 Flex 布局
真正难的不是让 Grid 跑起来，而是判断什么时候该砍掉 grid-template-areas 改用行列坐标，什么时候该把列表项内复杂排版交给 Flexbox 处理——这些取舍，得靠真机连 Safari 远程调试器反复看 layout 树才能建立直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
