直接用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))实现响应式列数：每列最小300px确保可读性，小屏自动退为单列，空列被收缩，剩余空间由实际列均分，无需媒体查询或js。
直接用 display: grid + repeat(auto-fit, minmax(300px, 1fr)) 就能跑通绝大多数响应式卡片场景，不用媒体查询、不靠 JS、不拼 float，但必须处理好图片约束、文字截断和 hover 动效这三处真实设备上最容易露馅的地方。
grid-template-columns 怎么写才不崩
写死列数（比如 repeat(3, 1fr)）是最大陷阱——小屏下卡片被压扁、文字换行错乱、甚至触发横向滚动。真正可控的写法只有一条：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))是黄金组合：300px 是移动端可读最小宽度，低于它就自动切单列；1fr确保剩余空间均分 -
auto-fit比auto-fill更适合卡片列表，它会收缩空轨道，避免小屏出现“看不见的列”把卡片挤窄 - 别给容器设
width: 100%或max-width同时又用1fr，这会让 Grid 在窄屏下计算出负值或异常缩放 - 如果卡片高度差异大，加
align-self: start到.card，否则短内容会被拉高、底部悬空
卡片内部怎么让文字不溢出、图片不撑破
外层 Grid 再稳，也救不了卡片内部结构失控。常见症状是图片突然把卡片顶高、标题折行位置诡异、描述文字截断在中间。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 图片必须包一层
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更可靠，且不依赖固定高度 - 禁用
position: absolute布局按钮或标签：它脱离文档流，Grid/Flex 高度算不准，Safari 下尤其容易错位 - 卡片本身别设死
height，靠flex-direction: column+flex-grow: 1让内容区域吸满空间
gap 和 margin 混用为什么总出问题
gap 是 Grid 原生间距控制，而 margin 是通用布局属性，混用会直接破坏 Grid 的轨道计算逻辑。
-
gap: 1.5rem同时控制行距和列距，干净且不会触发外边距合并；加margin到.card会导致实际间距翻倍，且不同断点下不可预测 - 旧教程里用
:not(:last-child)清除末项 margin，现在纯属冗余，gap已覆盖全部需求 - 如果要兼容 IE11，可用
grid-column-gap/grid-row-gap替代，但别为它妥协现代写法 - 慎用百分比或
em单位的gap，某些旧版 Safari 渲染异常，统一用rem或px
hover 动效卡顿到底该动什么
用 top: -5px 或 margin-top: -5px 做上浮效果，会强制浏览器重排（reflow），尤其在中低端安卓机或长列表中明显掉帧。
- 真正流畅的动效只该用硬件加速属性：
transform: translateY(-5px)+transition: transform 0.3s ease - 避免同时过渡
box-shadow和transform，iOS 上易掉帧；如需强化视觉，优先提升transform幅度，而非叠加多层阴影 - 别在卡片上用
filter: drop-shadow()，它比box-shadow更耗性能，滚动时极易卡顿 - 确保父容器没写死
height或min-height，否则 hover 放大后可能被截断
最常被忽略的不是那行 repeat(auto-fit, minmax())，而是图片没约束、文字没截断、动效靠 margin 推——这些细节不处理，再“响应式”的布局也会在真机上第一眼就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
