推荐用 repeat(auto-fit, minmax(250px, 1fr)) 实现响应式列数,配合媒体查询调整 grid-gap 和子项约束;小屏设 1fr 单列、中屏 repeat(2, 1fr)、大屏用 auto-fit 自动适配,避免固定 min-width 导致溢出。

用 grid-template-columns 配合 @media 控制列数
Grid 布局本身不自动响应,必须手动用媒体查询切换 grid-template-columns 的值。关键不是“让 Grid 自己变”,而是提前定义几组列配置,按视口宽度切换。
- 小屏(如手机)常用
1fr单列,避免内容挤压 - 中屏(如平板)可设
repeat(2, 1fr)双列 - 大屏保留
repeat(3, 1fr)或更多,但别硬写死数量,优先用minmax()+auto-fit
推荐用 repeat(auto-fit, minmax(...)) 减少媒体查询
比起写一堆 @media,更简洁健壮的方式是用 auto-fit 让 Grid 自动计算能放几列——前提是容器宽度可变、子项有最小宽度约束。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))表示:每列至少 250px,最多均分剩余空间,列数随容器缩放自动增减 - 比纯
auto-fill更实用,它会在空间不足时收缩列数,而不是留空列 - 注意:这个方案依赖父容器宽度变化,如果父容器被设了固定宽或
max-width且没配合媒体查询,可能在某些尺寸下卡住不重排
移动端常见错误:忘了重置 grid-gap 或子项 min-width
只调列数不够,间隙和子项自身约束会破坏响应效果。
- 大屏设的
grid-gap: 2rem在手机上可能撑开过宽,建议在小屏媒体查询里降为0.5rem - 如果子项写了
min-width: 300px,即使列设成1fr,Grid 也会因内容溢出而横向滚动——应改用width: 100%或删掉min-width - 避免对
grid-item设固定width,它会和grid-template-columns冲突
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 1rem;
}
@media (max-width: 480px) {
.container {
grid-gap: 0.5rem;
}
}
实际项目中,auto-fit + minmax() 覆盖大多数场景,但遇到复杂嵌套或需要精确控制断点(比如 iPad 竖屏强制双列),还是得补一两条 @media。别指望一套规则适配所有设备,重点是先跑通主流断点,再针对真机测试微调。










