核心是grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))，浏览器依容器宽自动计算列数，auto-fit合并未填充轨道避免留白，minmax设最小宽与弹性上限，fr单位比%更适配Grid剩余空间分配。
grid-template-columns 用 repeat(auto-fit, minmax()) 一条声明搞定列数变化
不用写多个 @media，核心就是这条声明：grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))。它让浏览器根据容器宽度自动决定能放几列：只要剩余空间 ≥ 320px，就尝试加一列；不够时自动回退为更少列，内容自然换行堆叠。
常见错误是把 auto-fit 写成 auto-fill——后者会预留所有可能轨道（哪怕空着），导致右侧大片留白；auto-fit 才会合并未填充的轨道，真正“有多少内容占多少列”。
-
minmax(320px, 1fr)中的320px是每列最小宽度，低于此值就换行；1fr是弹性上限，保证等宽分配 - 若需限制最多 4 列，不要改
repeat()参数，而是给容器加max-width: 1280px（4 × 320px） - IE 不支持
auto-fit，降级方案只能是固定列数 +@media，比如grid-template-columns: 1fr+@media (min-width: 768px) { ... repeat(2, 1fr) }
为什么 fr 单位比百分比更适合 Grid 列宽
% 在 Grid 里容易出错，尤其当父容器有 padding 或嵌套在 flex 容器中时，计算基准混乱，常导致子项被压缩、文字换行异常甚至触发横向滚动条。而 fr 是 Grid 原生单位，按“剩余可用空间”分配，不依赖父宽绝对值，天然适配弹性需求。
典型反例：grid-template-columns: 25% 25% 25% 25% 在小屏下不是优雅收缩，而是硬性挤压——四列强行并排，内容被迫折行或溢出。
立即学习“前端免费学习笔记（深入）”；
- 纯等宽卡片布局，直接用
repeat(4, 1fr)，再套minmax()控制下限 - 混合布局（如侧边栏 + 主区），用
250px minmax(300px, 1fr)，避免混用px和%——Grid 会重新解释，结果不可控 - 不要对
grid-auto-rows用百分比，它不接受相对容器高度的计算
小屏堆叠失效？检查 grid-auto-rows 和子项尺寸约束
即使列数正确变少了，有时网格项仍不堆叠、反而横向溢出，问题往往出在两处：grid-auto-rows 设得太小，或子项（尤其是图片）没设宽高约束。
推荐写法：grid-auto-rows: minmax(min-content, max-content)，它让每行高度随内容自然伸缩，比单纯 1fr 或固定值更安全。若某项高度突变（比如展开详情），仅靠此属性不会触发动画，需额外加 transition: grid-row-end 0.3s 并手动控制 grid-row 跨度。
- 图片必须加
img { width: 100%; height: auto; }，否则可能撑破网格单元格 - 显式定位的项（如用了
grid-column: 1 / 3）在响应式时容易“卡住”，小屏下建议重置为grid-column: auto - 如果网格项含大量文本，
minmax(100px, auto)比auto更稳，防止过矮内容挤在一起
@container 查询：当网格嵌在不确定宽度的卡片里怎么办
传统 @media 基于视口宽度，但真实场景中，Grid 容器常被嵌在卡片、侧边栏或 CMS 组件里——这些父容器宽度本身就不固定。这时 @container 查询更精准：只要父元素设了 container-type: inline-size，子项就能根据自身容器宽度响应。
启用方式简单：.card { container-type: inline-size; }，然后在子项里写 @container (min-width: 400px) { .grid { grid-template-columns: repeat(2, 1fr); } }。目前 Chrome 113+、Edge 113+、Firefox 119+、Safari 16.4+ 支持，不支持时直接忽略，需提供降级样式。
- 不能和
display: contents共存，否则容器查询失效 - 别指望它替代
@media，它是补充——视口级适配仍靠媒体查询，组件级才用容器查询 - 调试时用浏览器开发者工具的 “Layout” 面板确认容器是否被识别为 queryable
grid-auto-rows 的行为边界和 @container 的兼容性兜底。前者影响内容垂直节奏，后者决定组件能否真正独立响应——这两处不处理，光调列数只是半截响应式。 
