核心写法是grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))，它使卡片自动排列并伸缩；需设min-width:0、width:100%、overflow:hidden等确保内容不破坏网格布局。
grid-template-columns: repeat(auto-fill, minmax(...)) 是核心写法
要让卡片在容器内自动排列并随屏幕宽度伸缩，关键不是靠媒体查询或 JavaScript，而是用 grid-template-columns 配合 auto-fill 和 minmax()。它会让 Grid 轨道“尽可能多”地填满容器，同时保证每张卡片最小宽度不坍缩。
常见错误是写成 repeat(auto-fit, ...) 却没理解两者的区别：auto-fill 会保留空轨道（适合需要对齐或 hover 动画的场景），auto-fit 会收缩空轨道、把剩余空间分给已有项目——多数卡片布局其实更适合 auto-fit，但标题明确要求 auto-fill，那就得接受它留白的特性。
-
minmax(280px, 1fr)表示：每列至少 280px，最多均分剩余空间；小屏下若不够一列，整行留空也不会强行压缩卡片 - 必须给卡片设置
min-width: 0（尤其内部含长文本或图片时），否则1fr可能失效，卡片撑破网格 - 容器需设
width: 100%或max-width，否则在 flex 容器里可能不触发自动填充
卡片内容溢出导致换行错位？加 overflow 和 min-width
即使 Grid 列数算对了，卡片内部文字过长、图片无约束、或嵌套 flex 布局没设收缩，都会让卡片高度突兀，破坏整齐感。这不是 Grid 的问题，而是子元素未适配。
- 给卡片加
overflow: hidden防止内容撑高，再配合text-overflow: ellipsis处理超长标题 - 图片必须设
width: 100%; height: auto; display: block;，否则默认 inline 会引入基线间隙 - 卡片内若用
display: flex布局（如头像+文字），子项要加flex-shrink: 0或min-width: 0，避免 flex 项强行拉宽卡片
gap 和 justify-content 搭配决定卡片间距与对齐行为
gap 控制行列间距，但它不等于 margin；而 justify-content 决定整行卡片在容器内的水平位置，这点常被忽略。
立即学习“前端免费学习笔记（深入）”；
- 用
gap: 1rem替代给卡片加margin，避免最后一行右侧/底部多出多余间隙 - 如果卡片宽度固定（比如
minmax(300px, 300px)），容器有剩余空间，默认左对齐；加justify-content: center可居中整行，但注意：当列数变化时，居中可能导致左右空隙不一致 - 想严格等距（包括首尾到边距），用
justify-content: space-between，但要求至少两列才生效；单列时会退化为左对齐
IE 不支持 auto-fill？别硬扛，用 @supports 做降级
IE11 完全不识别 auto-fill 和 minmax()，直接写 fallback 会覆盖现代浏览器样式。稳妥做法是用 @supports 隔离 Grid 新语法。
- 先写 Flexbox 降级：用
display: flex; flex-wrap: wrap;+flex-basis: calc(33.333% - 1rem)模拟三列 - 再用
@supports (display: grid) and (grid-template-columns: repeat(auto-fill, 1fr)))包裹 Grid 样式，确保只在支持的浏览器中生效 - 不要依赖
grid-column-end: -1这类高级特性做响应式，它在 Safari 旧版和部分安卓 WebView 中行为不一致
真正难的不是写出那行 repeat(auto-fill, minmax(280px, 1fr)))，而是卡片内容是否「驯服」——图片有没有塌缩、文字会不会撑开、内层 flex 有没有锁住宽度。Grid 只负责分配格子，填什么，还得自己管。
