grid-template-columns 配合 minmax() 和 auto-fit 可实现列数自动调整：minmax(300px, 1fr) 设定每列最小宽度与弹性分配，auto-fit 合并未填充轨道，避免空列留白；auto-fill 则保留所有轨道。
grid-template-columns 配合 minmax() 和 auto-fit 实现列数自动调整
不用写一堆媒体查询就能让网格列数随屏幕缩放增减，关键在 grid-template-columns 的写法。用 minmax(300px, 1fr) 表示每列最小 300px、最大均分剩余空间，再配合 auto-fit（不是 auto-fill）让空列自动收缩消失。
常见错误是写成 auto-fill，它会保留所有可能的轨道（包括空的），导致右侧留白；而 auto-fit 会合并未填充的轨道，真正实现“有多少内容占多少列”。
-
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))—— 小屏单列，中屏双列，大屏三列或四列，完全由容器宽度决定 - 若想限制最多 4 列，可改用
repeat(auto-fit, minmax(250px, 1fr)))并给容器加max-width: 1200px - 注意：IE 不支持
auto-fit，如需兼容，得降级为固定列数 + 媒体查询
使用 grid-auto-rows 控制行高，避免内容撑开后错位
响应式 Grid 中，图片或文字高度不一致时，grid-auto-rows 能统一行为基准。设为 minmax(100px, auto) 比单纯写 1fr 更安全——既防止过矮内容挤在一起，又允许长内容自然撑高。
容易忽略的是：当某项内容高度突变（比如展开详情），仅靠 grid-auto-rows 不会触发布局重排动画；如需平滑过渡，得额外加 transition: grid-row-end 0.3s 并配合 grid-row 手动控制跨度。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
grid-auto-rows: minmax(min-content, max-content)，适配文字流式高度 - 若子项含图片，记得给
img加width: 100%; height: auto;，否则可能溢出网格单元格 - 不要对
grid-auto-rows使用百分比值，它不接受相对于容器高度的计算
@container 查询 + container-type: inline-size 是下一代响应式 Grid 方案
传统媒体查询基于视口，但 Grid 子项常被嵌在不确定宽度的卡片或侧边栏里。这时 @container 查询更精准：只要父容器设了 container-type: inline-size，子项就能根据自身容器宽度响应。
目前（2024）Chrome 113+、Edge 113+、Firefox 119+ 支持，Safari 16.4+ 部分支持。不支持时会直接忽略该规则，需提供降级样式。
- 启用方式：
.card { container-type: inline-size; }，然后在子项中写@container (min-width: 400px) { .grid { grid-template-columns: repeat(2, 1fr); } } - 不能和
display: contents共存——后者会让元素失去布局容器身份，@container失效 - 与
grid-template-columns: subgrid搭配时需谨慎，subgrid 不继承父容器的 container-type
gap 属性在响应式 Grid 中的实际缩放逻辑
gap 看似简单，但在响应式场景下容易引发意外留白。它不随字体缩放，也不响应 vw 单位的动态变化——除非你主动写 gap: clamp(0.5rem, 2.5vw, 1.5rem)。
多数人卡在“为什么小屏 gap 变得过大”，其实是用了固定值如 gap: 2rem，而没考虑移动端视口窄、相对视觉占比更高。用 clamp() 是最轻量的解法。
-
gap: clamp(0.75rem, 3vw, 1.25rem)—— 小屏取 0.75rem，大屏封顶 1.25rem，中间线性过渡 - 避免用
%做gap单位，它会被解析为相对于网格容器内联尺寸的百分比，结果不可控 - 如果网格有
align-items: start，且子项高度差异大，gap仍只作用于行/列间距，不会影响子项内部对齐
minmax() 的两个参数谁优先。这些细节不报错，但会让布局在某个临界宽度突然跳变。 
