17370845950

移动端显示异常时，使用 fr 单位 和 repeat() 结合的网格布局是一种高效且响应式强的解决方案。关键在于避免固定列宽、适配不同屏幕尺寸，并确保容器和子元素行为一致。

使用 fr 单位替代固定宽度

在移动端，固定像素（px）或百分比（%）容易导致溢出或空白过多。fr（fraction）单位能按比例分配可用空间，更适合动态屏幕。

• 将列设置为 1fr 表示均分容器宽度
• 例如：grid-template-columns: 1fr 2fr 表示第二列是第一列的两倍宽
• 避免使用 px 或固定 em 定义主轴方向尺寸

用 repeat() 创建自适应列数

结合 repeat() 与 auto-fit 或 auto-fill，可以让网格在小屏幕上自动换行并调整列数。

• repeat(auto-fit, minmax(120px, 1fr))：每列最小 120px，最大 1fr，数量根据空间自动调整
• 屏幕变窄时，列会自动折行，保持等宽且不溢出
• 比写死 repeat(4, 1fr) 更灵活，尤其适合卡片类布局

确保容器正确处理响应式

即使用了 fr 和 repeat，若父容器或 body 设置不当，仍可能在移动端错位。

• 给容器添加 width: 100% 或 max-width: 100%
• 检查是否有横向滚动，移除 white-space: nowrap 等影响布局的样式
• 使用 box-sizing: border-box 防止 padding 导致宽度超出

实际示例代码

一个适用于移动端的网格布局写法：

.grid-container {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

这个结构在手机上会显示 2~3 列，在平板上更多，无需额外媒体查询。

基本上就这些。合理使用 fr 和 repeat，配合 minmax 与 auto-fit，能大幅减少移动端适配问题，让网格真正“流动”起来。