移动端列表页应使用grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))，因auto-fit能自动收缩空列、避免留白，适配小屏单列与大屏多列，兼顾结构语义与视觉节奏。
移动端列表页面用 CSS Grid 重构，不是“能不能”，而是“必须用”——尤其当列表项包含多行信息、图标、状态标签、操作按钮，且需要在不同屏幕下保持结构语义和视觉节奏时，flex 容易陷入嵌套过深、换行不可控、对齐错位的泥潭，而 Grid 能用一行 grid-template-columns 就稳住骨架。
移动端列表项怎么写 grid-template-columns 才不挤又不空？
关键不是“等宽”，而是按内容权重分配轨道：头像/图标固定、主信息弹性撑开、操作区最小自适应。别用 1fr 2fr 1fr 这类模糊比例。
-
grid-template-columns: 48px 1fr min-content;—— 48px 头像区、1fr主文本区（自动占满剩余）、min-content操作按钮（如「编辑」「删除」文字或图标，不拉伸） - 若主信息含两行（标题+副标题），加
row-gap: 4px;控制内部间距，比用margin更稳定 - 避免用
auto做列宽：在低端安卓 WebView 中渲染异常，min-content或具体像素更可靠
列表整体容器用 auto-fit 还是 auto-fill？
二者都用于响应式列数调整，但行为不同：auto-fit 会把空列收缩掉，auto-fill 保留空轨道。移动端列表几乎总是选 auto-fit。
-
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));—— 在小屏上强制单列，在 375px+ 屏幕可能出两列，但不会留白列 - 如果列表项高度差异大（比如有的带图片、有的纯文字），
auto-fit配合grid-auto-rows: minmax(72px, auto);可防止高度塌陷 -
auto-fill适合卡片网格（如商品列表），但列表页通常要纵向流式阅读，auto-fit更符合交互预期
如何让「加载更多」按钮跨整行且不破坏网格流？
常见错误是给按钮加 grid-column: 1 / -1; 后发现它卡在中间某行、上下留白异常——本质是没处理隐式网格行。
- 给容器加
grid-auto-flow: row;（默认值，但显式声明可防某些旧版 Safari 忽略） - 按钮本身设
grid-column: 1 / -1;，同时加justify-self: center;避免它被拉满全宽导致文字换行难控 - 若按钮前有分隔线，用
border-bottom而非额外元素；Grid 下插入伪元素::after并设置grid-column: 1 / -1;更轻量
为什么 iOS Safari 上列表滚动卡顿？Grid 布局要关掉什么？
不是 Grid 本身慢，而是某些组合触发了强制重排或层合成失效。重点检查三处：
- 禁用
grid-template-areas做列表项布局：字符串解析开销高，且每项重复定义区域名会放大性能损耗；改用grid-column/grid-row显式定位 - 避免在列表项里用
gap+padding叠加：iOS 16.4 之前，gap在滚动容器中可能引发合成层分裂，统一用padding控制内边距更稳 - 给容器加
will-change: transform;没用，真正有效的是给滚动父容器（如.list-wrapper）设overflow-y: auto; -webkit-overflow-scrolling: touch;
Grid 重构移动端列表，最难的不是写对属性，而是放弃“用 Flex 套 Flex”的惯性——一旦开始用 grid-template-columns 描述信息层级，你就不会再想回去手动算 margin 和 flex-basis 了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
