手机小屏下实现单列网格最直接方式是在媒体查询中设置 grid-template-columns: 1fr，覆盖原多列定义；无需修改 gap 或 grid-auto-rows，禁用百分比或冗余写法如 1fr 0fr。
media query 里用 grid-template-columns: 1fr 最直接
手机小屏下强行让网格变成单列，核心就是覆盖掉原来的多列定义。别想复杂，grid-template-columns 是唯一需要动的属性，其他如 gap 或 grid-auto-rows 通常不用改。
常见错误是只写 grid-template-columns: 100% —— 这不合法，CSS Grid 不接受百分比值作为 grid-template-columns 的直接子项；也有写 1fr 0fr 的，纯属多余，1fr 就够了。
- 在
@media (max-width: 768px)里重设grid-template-columns: 1fr - 如果原布局用的是
repeat(3, 1fr)，手机端就直接覆盖成1fr，不要留空格或逗号 - 确保媒体查询的断点比设计稿的移动端宽度略大一点（比如设成
768px而非480px），避免 iPad 竖屏卡在两列
用 minmax() + auto-fit 实现响应式自动收束
如果你不想手动写 media query，又希望 PC 和手机共用一套 grid 定义，grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) 是更健壮的选择。
它不是“强制单列”，而是让每列最小 300px、最大占满可用空间，小屏下自然只能塞下一列。好处是少写断点，坏处是得调好 minmax() 的第一个参数——设太小（如 200px）可能在某些安卓浏览器里触发双列，设太大（如 400px）又会让窄屏出现横向滚动。
-
auto-fit比auto-fill更合适：前者会收缩空轨道，后者会保留所有预分配列 - 搭配
justify-content: center可避免单列内容贴左，但注意这会影响整体对齐逻辑 - 部分旧版 Safari（iOS 14.5 之前）对
auto-fit支持不稳定，真要兼容就得 fallback 到 media query
遇到 display: grid 不生效？先查父容器宽度
写了 media query 也没变单列，大概率不是 CSS 写错了，而是父容器本身没撑开。Grid 布局依赖父容器有明确宽度，而手机上常因 width: 100vw 配合 padding 或 border 导致内容区实际小于视口。
典型现象：调试时看到元素明明应用了 grid-template-columns: 1fr，但 DevTools 里该规则被划掉，hover 提示 “invalid value” 或 “ignored”。这时候八成是父级设置了 display: inline-grid 或者外层有个 overflow: hidden 把 grid 容器裁掉了。
- 用 DevTools 选中 grid 容器，看 computed 标签下
grid-template-columns是否显示为1fr，而不是none - 检查是否意外继承了
grid-template-columns: none（比如从某个 reset.css 或 UI 库的 base class 来的） - 临时加一句
outline: 1px solid red看 grid 容器真实渲染范围，比光看 HTML 结构更可靠
flexbox 替代方案：什么时候该放弃 grid
如果项目里 grid 嵌套深、又用了 grid-area 手动定位，或者需要支持 iOS 12 以下设备，硬改 grid 响应式反而容易翻车。这时直接切到 display: flex + flex-direction: column 更省事。
这不是倒退，而是务实。Flex 的单列行为更可预测，且几乎所有现代手机浏览器对 flex-direction 的处理一致，连微信内置浏览器（X5 内核）都极少出问题。
- 把原 grid 容器的
display改成flex，再加flex-direction: column，子项默认垂直堆叠 - 原来用
grid-column: span 2控制跨列？在 flex 下直接删掉，靠width: 100%或flex: 1控制伸缩即可 - 注意
gap在 flex 中需用row-gap/column-gap显式声明，老版本 Android WebView 不支持gap，得用margin替代
最麻烦的不是怎么写单列，而是忘了 grid 子项自己设了 min-width 或 white-space: nowrap——这些会强行撑宽容器，让 1fr 失效。调的时候先禁用子项样式，一层层放开，比对着文档猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
