直接用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))即可实现响应式列数，无需媒体查询或js；但需配合卡片内flex布局、图片overflow:hidden+object-fit、文字截断及gap替代margin等细节约束，否则小屏仍会错位溢出。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通，不用媒体查询、不靠 JS、不写死列数——但卡片内部若没约束图片和文字，小屏上照样错位、溢出、跳动。
怎么写 grid-template-columns 才不崩
这行代码不是复制粘贴就完事的，minmax(280px, 1fr) 中的 280px 是最小列宽，不是随便写的数字：
-
240px是 iPhone SE 屏宽下还能勉强阅读的底线，内容少可压到这个值；标题+描述稍多就建议280px起步 -
1fr表示“剩余空间均分”，不是固定像素，所以别在父容器上同时设width: 100%和max-width，否则窄屏下 Grid 可能算出负值 - 必须用
auto-fit，不是auto-fill：前者收缩空轨道，后者保留空列占位——小屏下auto-fill会让三张卡片被硬塞进一屏，文字挤成两行还看不清 - 如果卡片总数少于最小列数（比如只放 2 张，而容器够宽显示 4 列），
auto-fit会自动合并空列，让现有卡片宽度拉满，不会留白
卡片内部为什么总塌、错位、图片撑破
Grid 控制列数和行对齐，但单张卡片高度由内容决定。常见症状是短卡片底部悬空、长卡片把整行顶高、图片突然把容器撑爆：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
.card加display: flex; flex-direction: column; height: 100%，再让主体区域（如描述文字）用flex-grow: 1吸满空间 - 图片必须包在
overflow: hidden容器里，且img标签设width: 100%; height: auto; object-fit: cover;—— 直接给img加border-radius会裁剪，不是圆角头像的正确解法 - 标题或描述过长？用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;截两行，比text-overflow: ellipsis更稳，也不依赖固定高 - 按钮想贴底？用
margin-top: auto，别用position: absolute—— 后者脱离文档流，Safari 下高度算不准，还影响可访问性
gap 和 margin 混用为什么总出问题
gap 是 Grid 原生间距控制，margin 是通用属性，混用等于主动破坏 Grid 的轨道计算逻辑：
-
gap: 1.5rem同时管行距和列距，干净、无外边距合并、不用:not(:last-child)清除末项 - 如果还在
.card上加margin: 1rem，实际间距会翻倍，而且不同断点下不可预测 - 旧 Safari（15.4 之前）不支持
gap在inline-grid上生效，务必确保容器是display: grid，别偷懒写成inline-grid - gap 值别用百分比或
em，某些旧版 Safari 渲染异常，统一用px或rem
真正麻烦的不是写出那行 repeat(auto-fit, minmax())，而是图片没约束、文字没截断、按钮用 absolute 定位、阴影没降级——这些细节不处理，再“响应式”的布局也会在真机上露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
