使用 fr 单位与 repeat() 结合可实现高效响应式网格布局，通过 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 让列宽自适应屏幕尺寸，避免固定宽度导致的溢出问题，配合 width: 100%、box-sizing: border-box 等样式确保容器行为一致，在移动端自动调整列数并均分空间，无需媒体查询即可实现流畅卡片布局。
移动端显示异常时，使用 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，能大幅减少移动端适配问题，让网格真正“流动”起来。
