最稳方案是display: grid配合repeat(auto-fit, minmax(300px, 1fr))，auto-fit收缩空轨道避免小屏空白，minmax确保单列最小300px不压扁内容，且无需媒体查询。
直接用 display: grid 配合 minmax() 和 auto-fit，是目前最稳、最省事的方案。别再手动写媒体查询或套 Flexbox 的 calc 宽度了——那些写法在图片加载延迟、字体渲染差异、Safari 旧版里都容易错位。
为什么不用 float 或 inline-block 做卡片排列
这两种方式早已过时，问题不是“能不能显示”，而是“什么时候崩”。典型现象：卡片高度不一致时底部对不齐；图片异步加载后整行重排导致闪动；子元素 margin 合并造成间距异常。它们依赖精确的像素控制，而现代浏览器渲染存在 subpixel 计算误差，尤其在 Retina 屏或缩放为 110% 的 Windows 系统上极易出问题。
- float 需要额外清除浮动（
clearfix），且无法响应式自动换列 - inline-block 元素间天然有空白字符，必须用注释或 font-size: 0 折腾，维护成本高
- 两者都不支持 gap，只能靠 margin 模拟，但 margin 在换行时会干扰父容器计算
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 怎么理解
这行代码不是魔法，它明确告诉浏览器：“每列至少 300px，最多均分剩余空间；如果放不下，就少列，别压缩”。关键点在于 auto-fit 而非 auto-fill——前者会收缩空轨道，后者保留所有预设轨道，导致小屏下出现不可见的空白列。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
minmax(300px, 1fr)：单卡最小宽度 300px，避免文字被压扁；大屏下自动拉伸填满 - 容器必须有明确宽度（比如
width: 100%或max-width），否则 grid 不知道“剩余空间”是多少 - 若卡片内容高度差异大，务必加
align-self: start到卡片本身，否则 grid 默认 stretch 会让矮卡片被拉高、错位
卡片内部结构一碰就溢出？问题大概率不在外层布局
外层 grid 再完美，也救不了一张没约束的图片或一段没截断的长标题。常见症状：图片撑破圆角、标题折行压住按钮、文字在小屏上跑出卡片边界。
立即学习“前端免费学习笔记（深入）”；
- 图片必须加
width: 100%; height: auto; object-fit: cover;，并用overflow: hidden包裹容器 - 标题截两行推荐用
display: -webkit-box; -webkit-line-clamp: 2;，比text-overflow: ellipsis更可靠 - 禁用
position: absolute定位操作按钮——它脱离文档流，grid 无法感知其高度，会导致卡片整体高度计算错误 - 所有图片必须带
loading="lazy"和有效alt，否则本地双击打开 HTML 时（file:// 协议）会因跨源策略加载失败
真正难的不是写出能跑的代码，而是让卡片在 iOS 14.5 的 Safari、Android WebView、Windows 缩放 125%、甚至图片加载慢半秒的情况下，依然保持结构稳定。这些细节不体现在“怎么画框”的教程里，但会出现在上线后用户截图发来的“最后一行只剩一张卡”的问题中。
