移动端商品展示用Grid实现完美对齐需控制三件事：显式定义列轨道、统一卡片高度、用gap驱动间距；列数用auto-fit+minmax自动适配，配合grid-auto-rows、aspect-ratio、文字截断等细节保障整齐一致。
移动端商品展示用 Grid 实现完美对齐，核心不是堆属性，而是控制好三件事：列轨道显式定义、卡片高度统一、间距由 gap 驱动而非 margin。
列数自动适配，别写死数字
用 auto-fit + minmax 让浏览器按屏幕宽度自动算列数，比媒体查询更轻量、更可靠：
- 手机小屏（≤375px）：自动收缩为 1 列，卡片占满宽度
- 中等屏（376–767px）：通常出 2 列，每列最小 320px
- 大屏（≥768px）：可扩展到 3 或 4 列，不留白
写法示例：
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
卡片等高是整齐的前提
商品图有高有矮、标题行数不一，直接放 grid 默认会“参差不齐”。解决方法不是给每个卡片设固定 height，而是让 grid 主动约束行高：
- 加 grid-auto-rows: minmax(240px, auto) —— 每行至少 240px（含图片+文字+按钮的合理空间），内容多时可撑开
- 配合 align-items: start 防止 stretch 拉伸导致文字行距异常
- 图片容器设 aspect-ratio: 1/1 和 object-fit: cover，确保缩略图比例一致不拉伸
间距干净，避免 margin 带来的错位
用 gap 统一控制行列间隙，它不参与子项宽度计算，不会触发换行错位或外边距折叠：
- 横向间隙（列之间）和纵向间隙（行之间）一次定义，比如 gap: 12px
- 若需首尾不留空，不用删 margin，而是给容器加 padding: 12px 来视觉对齐
- 避免在卡片内部用 margin-top/margin-bottom 调垂直位置——改用 padding 或 align-self
细节补强：文字截断与交互反馈
对齐不只是视觉，还包括内容呈现的一致性：
- 商品标题加 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;，强制最多两行，末尾省略
- 价格和按钮区域用 min-content 或固定宽（如 80px），防止「加入购物车」文字过长撑开整列
- 悬停效果用 transform: translateY(-2px) + box-shadow，不改变布局流，不影响对齐
