用 display: grid + minmax() 实现响应式卡片布局，核心是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，配合 flex 垂直对齐、transform 流畅 hover、aspect-ratio 防闪跳及 contain 优化重绘。

直接用 display: grid + minmax() 就能跑通，别从 float 或 inline-block 开始学 —— 那些写法现在只会在老项目里拖慢你理解现代布局逻辑。

怎么让卡片自动换行又不卡死在小屏上

核心是这行 CSS：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。它不是“固定几列”，而是告诉浏览器：“每张卡片至少宽 280px，如果放不下就换行；剩余空间均分给所有卡片”。

• auto-fit 和 auto-fill 看起来一样，但 auto-fit 会收缩空列，auto-fill 会留空格 —— 动态内容下选 auto-fit 更稳
• 280px 是经验值：iPhone SE 宽度约 375px，减去左右边距后单卡刚好能塞下；设太小（比如 200px）会导致文字挤成一行、截断难读
• 别用 px 做断点，直接改 minmax() 第一个参数就行，比如小屏改成 minmax(220px, 1fr)，比写一堆 @media 干净得多

卡片内部怎么对齐标题和按钮到底部

用 flex-direction: column + margin-top: auto 最可靠。很多新手试 position: absolute 结果一加文字就溢出、一换字体就错位。

• 给 .card 加 display: flex; flex-direction: column; height: 100%
• 把正文区域（比如 .card-content）设为 flex-grow: 1
• 按钮或 footer 元素加 margin-top: auto —— 它会把元素“吸”到最底，不管上面内容多高
• 别给 .card 写死 height: 300px，flex 布局依赖自然高度计算，硬设会导致文字被截或留白

hover 上浮动效为什么一卡就掉帧

因为用了 top、margin-top 或 transform: translateY() —— 这些属性触发 layout（重排），浏览器得重新算所有位置。真正流畅的写法只认 transform: translateZ(0) 或 scale()。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 正确写法：.card:hover { transform: translateY(-4px) scale(1.01); transition: transform 0.2s ease;
• 必须配 transition，且只过渡 transform 和 opacity —— 其他属性（如 background-color）可加，但别让它主导动画节奏
• 如果卡片里有图片，记得加 img { display: block; }，否则底部会多出 4px 空隙，hover 时整个卡片看起来“歪了”

图片加载闪跳、文字撑开卡片怎么办

这不是样式问题，是渲染时机没控住。真实用户场景下，字体还没加载完、图片异步返回前，卡片高度是浮动的 —— 导致页面反复重排、滚动条跳动。

立即学习“前端免费学习笔记（深入）”；

• 给图片容器加 aspect-ratio: 16/9（支持率 >95%），fallback 用 padding-top: 56.25% + position: relative 套内层 img
• 文字截断用 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;，别用 JS 截字
• 卡片容器加 contain: layout style paint，告诉浏览器：“这块内容变化不影响外面”，大幅减少重绘范围

真正卡住新手的，从来不是怎么画个方块加阴影，而是当字体加载慢、图片延迟返回、用户快速滚动时，卡片会不会跳、会不会错位、键盘 tab 是否能落到按钮上 —— 这些细节没压住，再漂亮的代码上线也会被真实流量打脸。