CSS Grid通过fr单位、auto-fit与minmax结合、grid-gap及媒体查询，实现移动端自适应布局。1. 使用fr按比例分配空间，避免固定像素溢出；2. repeat(auto-fit, minmax(280px, 1fr))使网格项自动换行并保持最小宽度；3. grid-gap统一管理间距，提升视觉一致性；4. 配合grid-area和display: none在不同屏幕下重排或隐藏元素，优化移动体验。该方案减少媒体查询数量，降低维护成本，布局更简洁高效。
CSS Grid 是现代网页布局的强大工具，在移动端适配中尤其灵活。它能帮助开发者快速构建响应式结构，无需依赖复杂的浮动或定位。关键在于合理使用网格容器的属性和媒体查询，让内容在不同屏幕尺寸下自动调整。
使用 fr 单位实现弹性布局
fr 单位是 Grid 布局中的“份额”单位，非常适合移动端的等分或按比例分配空间。
说明：- 用 1fr 2fr 可以让两列分别占据 1/3 和 2/3 的可用空间
- 在小屏幕上，这种比例会自动缩放，避免固定像素带来的溢出问题
- 替代传统的百分比计算，减少误差和维护成本
示例：创建一个自适应卡片布局
.container {
display: grid;
grid-template-columns: 1fr; /* 默认单列 */
}
<p>@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}</p><p>@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}结合 auto-fit 与 minmax 实现自动换行
这是移动端适配中最实用的技巧之一，能让网格项根据容器宽度自动换行并保持最小宽度。
立即学习“前端免费学习笔记（深入）”；
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}- minmax(280px, 1fr) 表示每个网格项最小 280px，最大占满剩余空间
- 当容器变窄时，超出最小宽度的项会自动换行
- 无需为每种设备写 media query，更简洁高效
利用 grid-gap 统一间距管理
在移动端，留白对用户体验至关重要。grid-gap 能统一控制行与列之间的间距，避免 margin 塌陷或错位。
- 设置 grid-gap: 16px 可在所有设备上保持一致的视觉节奏
- 配合 rem 或 em 单位，实现随根字体缩放的响应式间距
- 比传统 float + margin 方案更稳定，尤其在动态内容场景下
隐藏或重排元素以优化移动体验
Grid 允许通过 grid-column 和 grid-area 控制元素位置，适合在移动端调整展示顺序。
- 用 display: none 隐藏非核心内容（如侧边栏）
- 通过 grid-area 在小屏上重新排列模块顺序，提升可读性
- 结合 @media 动态调整 grid-template-areas 布局
例如将导航移到内容下方：
.layout {
display: grid;
grid-template-areas:
"header"
"main"
"nav";
}基本上就这些。CSS Grid 让移动端适配变得更直观，重点是善用弹性单位和自动行为，减少硬编码。搭配媒体查询，既能保证兼容性，又能写出简洁高效的布局代码。
