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）上，就能让每个卡片独立响应自身宽度，而不是整个页面视口。这对瀑布流式网格或混合尺寸卡片特别有用。
立即学习“前端免费学习笔记（深入）”；
- 必须给容器设
container-name才能在@container中引用，但匿名容器（无 name）也可直接用@container - 目前仅支持
inline-size，不支持block-size或size - 若需兼容旧浏览器，仍要保留
@media回退，且优先级低于@container
gap 属性在不同断点下的取值策略
gap 看似简单，但在响应式中容易被忽略其缩放逻辑。大屏需要足够呼吸感（如 gap: 2rem），小屏则需收敛（gap: 0.75rem），但直接写媒体查询易重复：
- 推荐用 clamp() 控制 gap 动态缩放：
gap: clamp(0.5rem, 2.5vw, 1.5rem)—— 小屏保底 0.5rem，中屏按视口宽比例伸缩，大屏封顶 1.5rem - 避免对
row-gap和column-gap分开设不同单位，会导致视觉节奏断裂 - 如果网格内有带边框的子元素，注意
gap不会抵消 border，必要时用margin微调对齐
响应式 grid 的兼容性兜底方案
当目标环境需支持 Safari 13–14 或 Firefox 66–118 时，auto-fit + minmax() 无法生效，必须降级：
@supports not (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) {\n .grid {\n display: flex;\n flex-wrap: wrap;\n }\n .grid-item {\n flex: 1 1 calc(33.333% - 1rem);\n margin: 0.5rem;\n }\n @media (max-width: 768px) {\n .grid-item {\n flex-basis: calc(50% - 1rem);\n }\n }\n @media (max-width: 480px) {\n .grid-item {\n flex-basis: 100%;\n }\n }\n}这段 CSS 只在不支持现代 Grid 特性的浏览器中启用 Flexbox 回退。关键是用 @supports 精准检测，而非粗暴 UA 判断。
- 不要用
display: grid和display: flex同时声明，后者会覆盖前者 - Flex 回退中
flex-basis的计算要减去gap对应的 margin，否则小屏换行错位 - 若项目含复杂嵌套或
align-items差异，Flex 回退需额外测试垂直对齐行为
最麻烦的不是语法，而是设计系统里网格项的 padding、border、字体大小这些非 Grid 属性也要同步响应——它们不会随 grid-template-columns 自动缩放，得单独控制。
