grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) 实现列数随容器宽度自动增减，配合@container、clamp()控制gap及@supports兜底Flexbox，达成真正响应式网格。
grid-template-columns 配合 minmax() 和 auto-fit 实现流式列数
固定列数的 grid-template-columns: repeat(4, 1fr) 在小屏上会挤成窄条，真正自适应的关键是让列数随容器宽度自动增减。核心写法是：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));\n
这里 minmax(250px, 1fr) 表示每列最小 250px、最大均分剩余空间；auto-fit 会让浏览器尽可能多地铺满列，空余轨道会被压缩消失（对比 auto-fill 会保留空轨道）。实际效果是：屏幕宽 ≥1000px 显示 4 列，≥750px 显示 3 列，≥500px 显示 2 列，
- 别用
auto-fill替代auto-fit，否则小屏下会出现大量不可见空白列，影响语义和可访问性 - 250px 这个阈值需结合内容决定，图文卡片建议 280–320px，纯文字列表可降到 200px
- 该写法在 Safari 14+ 和 Chrome 84+ 完全支持，IE 不支持，需加回退方案
用 @container 查询替代媒体查询做局部响应
传统响应式依赖视口宽度（@media），但网格项内部尺寸变化时无法响应。CSS Container Queries（Chrome 105+、Firefox 119+）允许基于父容器尺寸调整子项布局：
.card {\n container-type: inline-size;\n}\n\n.card > h3 {\n font-size: 1rem;\n}\n\n@container (min-width: 300px) {\n .card > h3 {\n font-size: 1.25rem;\n }\n}
配合 Grid 使用时，把 container-type: inline-size 加在网格项（.grid-item）上，就能让每个卡片独立响应自身宽度，而不是整个页面视口。这对瀑布流式网格或混合尺寸卡片特别有用。
立即学习“前端免费学习笔记（深入）”；
