推荐用 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 自动计算能放几列——前提是容器宽度可变、子项有最小宽度约束。
