用CSS Grid实现带图标的响应式功能卡片，核心是display: grid搭配grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))和gap实现列数自适应；图标与文字需通过align-items: baseline或内嵌flex容器统一基线对齐；移动端用@media (max-width: 768px)切两列，更小屏切一列；避免Flex嵌套，优先用Grid分层控制结构，并确保卡片根元素有足够padding、cursor: pointer及min-height以保障点击体验。
如何用 CSS Grid 实现带图标的响应式功能卡片
直接用 display: grid 搭配 grid-template-columns 和 gap 就能快速铺开，但图标对齐、文字基线、移动端断点容易出错。别用 flex 嵌套 flex，Grid 本身就能管好图标+文字+描述的垂直居中。
- 图标建议统一用
<svg>内联或<img src="icon.svg">，避免字体图标在缩放或高对比度模式下模糊或缺失 - 给卡片容器设
display: grid; grid-template-rows: auto 1fr auto;，把图标、标题、描述分层控制，比用align-items: center更稳 - 移动端用
@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }，小屏切两列比单列更省空间；再小就切一列，别硬撑三列导致图标被压缩
图标与文字基线不齐？关键是 line-height 和 vertical-align
常见现象：SVG 图标看起来“飘”在文字上方，或和标题文字底部不对齐。这不是 Grid 的问题，是行内元素默认 vertical-align: baseline 导致的。
- 给图标容器（比如
<div class="icon">）加vertical-align: middle;，同时确保父容器有明确line-height（如line-height: 1.4;） - 更稳妥的做法：把图标和标题都包进一个
display: flex; align-items: center;的子容器里，Grid 管布局，Flex 管内部对齐 - 避免用
margin-top硬调——一旦字体大小变化或换字体，偏移就失效
Grid 卡片点击区域太小？补足 padding 和 cursor
用户反馈“点不中”，往往是因为只给 <a> 或 <button> 设了样式，但卡片内容没撑满，实际可点击区域远小于视觉区块。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 卡片根元素（如
<article>或<div class="card">）必须设padding: 1.25rem;，且cursor: pointer; - 如果用
<a>包整个卡片，记得加text-decoration: none;和display: block;，否则默认 inline 行为会吃掉 padding - 触摸设备需额外加
min-height: 80px;（iOS Safari 对过小点击区有拦截）
IE11 兼容性怎么处理？别全盘放弃，只降级 Grid
IE11 不支持 grid-template-areas 和部分函数（如 minmax()），但基础 Grid 布局仍可用，关键在写法收敛。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-columns: repeat(3, 1fr);而非repeat(auto-fit, minmax(300px, 1fr)))—— 后者 IE11 完全不识别 - 替换
gap为grid-column-gap和grid-row-gap（IE11 只认这两个独立属性） - 图标若用 SVG，确保
<svg>有明确width和height，IE11 不解析viewBox自适应
复杂交互动效（如悬停缩放、渐变边框）在 IE11 里直接去掉，用 solid border + background-color 替代，别强撑。
