简诗卡片式布局设计

卡片布局为什么容易做崩

列表页同时承载图片、标题、摘要和操作按钮时，最常见的失败不是样式难看，而是结构失控：有的卡片在桌面端挤成一列，在手机上被截断；有的阴影过重、圆角不一致，整页显得廉价；还有的把大段文字塞进一张卡，用户得在卡片内部滚动才能读完——这时卡片已经退化成一个小页面，失去了作为「信息块」的意义。更隐蔽的问题在跨端实现：Flutter 的 Card 忘了设 clipBehavior，图片顶角会戳破圆角；React Native 只处理了 iOS 阴影，Android 端一片扁平。

这个技能提供了什么

它是一份针对 design-it 的子风格参考，把卡片式设计拆成三条可执行原则：

• 封装（Encapsulation）：每张卡片自成一体，包含图片、标题、简短描述和一个明确的操作入口，信息粒度控制在「一口能吃掉」的范围。
• 响应式回流（Responsive Flow）：桌面端 4 列网格、移动端单列，靠自适应网格而非手工断点切换。
• 清晰边界（Clear Boundaries）：卡片必须从背景中「浮起来」，用中性色背景衬托、8px 圆角加中等投影实现。

配套的实现指南按平台给出具体代码：Web 端用 CSS Grid 的 auto-fit 或 Masonry 布局；SwiftUI 用 LazyVGrid 配 .adaptive(minimum: 160)；Flutter 用原生 Card 并显式设置 Clip.antiAlias；React Native 用 borderRadius + overflow: 'hidden' 容器，并区分 Android 的 elevation 与 iOS 的 shadow* 属性；Jetpack Compose 用 Material 3 的 ElevatedCard 配合 GridCells.Adaptive(minSize = 160.dp)。文末还有两条硬性 Do/Don't：整张卡片可点击（不只标题或图片），以及卡片内不允许出现需要滚动的长文本。

适用边界

这是一份样式参考，不替代环境验证：对比度是否达标、键盘与读屏可达性、真机上的响应式表现，都需要另行测试。深色模式、动效规范、可访问性细节它都没有覆盖，适合作为排版骨架的快速参照，而不是完整的设计系统替代品。