移动端等宽布局最可靠方案是display: grid配合minmax() + auto-fit，因flex: 1受viewport缩放、字体渲染及默认最小宽度干扰易失效，而grid能自动响应屏幕宽度调整列数并保持视觉一致性。
移动端适配中，用 display: flex 写多列等宽布局最容易出错，真正可靠的是 display: grid 配合 minmax() + auto-fit。
为什么 flex: 1 在移动端经常失效
看似简单的一行 flex: 1，在手机上常出现列宽不均、最后一行塌缩、文字撑开列宽等问题。根本原因不是写法错，而是移动端 viewport 缩放、字体渲染差异、input/textarea 默认最小宽度干扰了 flex 计算。
- Android Chrome 对
min-width: 0的继承行为不稳定，某些版本下子项仍保留min-width: auto，导致flex: 1不收缩 - iOS Safari 在横屏切换时会重算 flex-basis，但若父容器没设
width: 100%或含padding，剩余空间计算就偏移 - 带输入框或图片的列，内容自然宽度 > 0 时，
flex-basis: 0会被浏览器悄悄覆盖，实际按min-content起始 - 不要依赖
calc(100% / 3)—— 移动端小数精度误差（如 33.333333333333336%）在多列叠加后会导致最后一列换行或溢出
Grid 实现响应式等宽列的标准写法
以下代码在 iOS 15+、Android Chrome 110+、Samsung Internet 22+ 中稳定工作，且能随屏幕宽度自动调整列数：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
关键点：
-
minmax(240px, 1fr)中的240px是移动端单列可用最小宽度（考虑手指点击热区），不是凭空写的；低于此值会自动减少列数 -
auto-fit会让空轨道收缩消失，auto-fill则保留空轨道，前者更适合内容动态加载场景 -
gap不影响列宽计算，但视觉上会“压缩”每列——如果设计稿要求“内容区域等宽”，这个值必须计入最小宽度约束（例如minmax(264px, 1fr)当gap: 12px且两列间有一个 gap） - 不需要媒体查询：同一段 CSS 在 iPhone SE（375px）显示 1 列，在 iPad（768px）显示 3 列，在桌面显示 5 列，全由浏览器自动决定
子项内容高度不一致怎么办
等宽 ≠ 等高，但视觉上需要对齐底部或统一卡片高度。别在 grid 容器上设 align-items: stretch（它只拉伸内容区，不控制 padding/border），正确做法是：
- 给每个子项设
height: 100%+display: flex+flex-direction: column，再用margin-top: auto推按钮到底部 - 若需固定长宽比（比如商品卡片），直接加
aspect-ratio: 4 / 3到子项，它优先级高于 height，且不破坏 grid 列宽分配 - 避免用
line-clamp截断标题——它依赖行高计算，在不同系统字体下表现不一；改用display: -webkit-box+-webkit-line-clamp并配合固定行高更稳妥 - 图片务必设
img { width: 100%; height: auto; object-fit: cover; }，否则拉伸变形会撑开整列
兼容 Android 4.4 和 iOS 9 这类老系统
这些系统不支持 repeat()、minmax() 和 1fr，fallback 方案不能靠 JS 动态插 class，而要利用 CSS 层叠特性：
.grid-container {
display: flex;
flex-wrap: wrap;
margin: 0 -6px;
}
.grid-container > * {
flex: 0 0 calc(33.333% - 12px);
padding: 0 6px;
}
@supports (display: grid) {
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
margin: 0;
}
.grid-container > * {
padding: 0;
}
}
注意：@supports 必须写在 flex 方案之后，否则老浏览器会忽略整个规则块；calc(33.333% - 12px) 中的 12px 是左右 padding 总和，不是 gap 值——因为 flex 里没有 gap 概念，只能靠 padding 模拟。
真正难的不是写出能跑的代码，而是让每列在各种屏幕缩放、系统字体、输入法弹窗状态下都保持视觉一致——这取决于你是否把尺寸约束放在子项上，而不是寄希望于容器“自动均分”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
