display: grid 搭配 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是最简稳的双列自适应方案，移动端单列、桌面≥600px自动多列；flex-wrap易错位、难控制最小列数且依赖媒体查询，而Grid需满足容器有宽、卡片不设width、必须用gap三条件才生效。
用 display: grid 搭配 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是目前最简、最稳、无需 JS 的双列（及多列）自适应卡片流方案，移动端自动收为一列，桌面自然扩展为两列或更多——前提是容器宽度 ≥ 600px。
为什么不用 flex-wrap 做双列自适应
Flexbox 的 flex-wrap: wrap 在双列场景下容易“假双列”：它按行填充，不保证每列高度一致，卡片高度不一时会出现明显错位和空白；更麻烦的是，它无法真正响应“刚好容下两列”的断点，而是依赖子项宽度硬算，一旦图片加载延迟或字体渲染差异，就可能在 Safari 或旧 Chrome 中突然变成单列或三列。
- 必须手动计算
flex-basis（如flex: 0 0 calc(50% - 0.75rem)），还要折算gap，极易出错 - 无法让“最后一行只有一张卡片时仍居中”，
justify-content: center会破坏列对齐逻辑 - 没有原生机制控制“最小列数为 2”，只能靠媒体查询兜底，丧失 fluid 特性
grid-template-columns: repeat(auto-fit, minmax(...)) 怎么写才生效
这个声明不是摆设，它依赖三个条件同时满足才能触发真正的自适应列数：
- 父容器必须有明确宽度（不能是
width: fit-content或未设宽的 inline 元素） - 卡片不能设
width或flex覆盖网格轨道分配（否则会撑破列） - 必须配
gap，不能用margin模拟间距——margin会干扰轨道尺寸计算，导致列数异常
正确写法示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
其中 300px 是单列最小宽度，1fr 表示均分剩余空间。当容器宽为 599px 时，auto-fit 会收缩空轨道，只留一列；600px 起即可稳定呈现双列。
双列对齐错位？加 align-self: start
卡片内容高度不一致时，Grid 默认会让所有 .card 拉伸到同一高度（align-items: stretch），导致文字区域被压缩、按钮位置浮动。这不是 bug，是 Grid 的默认行为。
- 给卡片加
align-self: start，让它只按自身内容高度排列 - 不要给
.card设固定height，否则会破坏自适应逻辑 - 若需底部按钮统一贴底，卡片内部用
display: flex; flex-direction: column+margin-top: auto控制，而非外部 Grid 强拉
真正容易被忽略的点是：这个布局对图片加载时机敏感——如果卡片内图片没设 aspect-ratio 或 height 占位，初始渲染时高度为 0，Grid 会按“无内容”计算轨道，等图片加载完再重排，造成视觉跳动。解决办法是给 img 加 aspect-ratio: 4/3 或 fallback 的 padding-top 百分比占位。
