目标是做一个「卡片组件」：左侧缩略图、右侧标题+描述+标签，整张卡片可以一键复用；同时把卡片放进列表/栅格，让它在不同宽度的容器里自动调整间距和对齐，不用每次手动拉尺寸。
1）新建一个 Frame（例如 1440×900），在右侧面板把 Layout grid 先关掉，避免你误以为对齐是网格在“帮忙”。
2）确定一套最小样式：标题 16/24、正文 13/20、标签 12/16；颜色先用灰阶（#111/#666/#999）即可。
3）准备一个缩略图占位：画一个 72×72 的矩形，圆角 12，填充浅灰；后面会放进 Auto Layout。
1）选中缩略图矩形 + 右侧文字组（先随便放两行文字），按 Shift + A 变成 Auto Layout。
2）方向选 Horizontal（水平），Spacing 先设 12，Padding 设 12（四边一致）。
3）把容器命名为 Card / ，这是后续组件化的基础。
关键点：此时你看到“子元素之间的间距”和“容器内边距”都在同一个地方控制，后面维护会非常省心。
1）把标题、描述两行文字选中，再按 Shift + A，做成 Vertical（垂直）Auto Layout，Spacing 设 6。
2）在文字容器上设置：
• Width：Fill container（填充父容器）
• Height：Hug contents（适配内容）
3）把描述文本（第二行）设置为：Text auto-resize = Auto height（自动高度），这样容器变窄时会自动换行并撑开高度。
1）做 2~3 个标签（小圆角矩形 + 文本），选中后 Shift + A 做成 Horizontal Auto Layout，Spacing 设 8。
2）把标签行放进文字容器底部（仍是 Vertical 结构）。
3）当你不需要标签时，不要删除：直接隐藏标签行（眼睛图标）。如果布局还会留空位，检查标签行所在的 Auto Layout 是否开启了“Include in layout”（在布局中包含）。
1）选中最外层 Card 容器（Card / ）：Width 设为 Fill container。
2）缩略图固定宽高：把缩略图的 Width/Height 设为 Fixed（72×72）。
3）文字容器必须 Fill container（前面已设）。这一步会让卡片在变宽时由文字区吃掉多余空间，而不是拉伸图片。
4）如果你希望标题在同一行尽量不换行：把标题文本设为 Auto width；如果更希望整齐换行：保持 Auto height。
1）选中 Card / ，按 Ctrl + Alt + K（或右键 Create component）。
2）做两个常见变体：
• Size=Small：Padding 10、缩略图 56、标题 15/22
• Size=Large：Padding 14、缩略图 80、标题 18/26
3）用 Variant 统一管理尺寸差异，而不是复制两份组件分别改。
1）新建一个容器 Frame，选中后 Shift + A，做成 Vertical Auto Layout，Spacing 设 12，Padding 设 0。
2）把卡片组件实例拖进去 6~10 个，每个卡片 Width 设 Fill container（这时就能跟着列表宽度走）。
3）如果你想做两列栅格：把外层容器改成 Horizontal，然后在里面放两个 Vertical 列容器（每列再放卡片）。保持结构清晰，后期改成三列只需要加一列容器。
• 间距怎么调都不对：检查你是在改“Spacing”还是“Padding”，别混在一起。
• 文本不换行：描述文本的 Text auto-resize 不是 Auto height；或者文字容器不是 Fill container。
• 图片被拉伸：缩略图没有 Fixed；或父容器设置了 Stretch 并且图片允许填充。
• 隐藏标签还占位：标签行没有关闭 Include in layout。
• 列表里卡片宽度不跟随：卡片实例（不是组件主件）没设 Fill container。
1）给卡片加一个右侧按钮（例如“查看”），并用 Space between 让文字区和按钮自动拉开。
2）做一个「有/无缩略图」的变体：无缩略图时让文字区占满，并保持内边距一致。
3）把标签做成独立组件（Chip），再在卡片里复用它，统一圆角/字体/内边距。
