推荐用 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。别指望一套规则适配所有设备，重点是先跑通主流断点，再针对真机测试微调。 
