卡片网格

一张活动卡片通常都有标题、时间、地点和操作。当这些信息属于同一类对象时，Card Grid 会让它们共享列宽、行关系和间距，阅读路径更清楚。

• 开始时：卡片一张接一张，用户需要不断上下移动来比较活动。
• 完成后：卡片形成稳定网格，同类字段在相近位置出现，比较更快。

当需求是展示多张结构相同的活动卡片时，定义 Card Grid；Grid 布局 负责列和行，Flex 布局 可以负责卡片内部一行按钮或标签的排列。卡片网格 ≠ Grid 属性，也不是 Flex 的另一个名字。

• 想改变重复内容的对象和字段，处理的是 Card Grid 的内容结构；想改变二维列行关系，处理的是 Grid。
• 想让一张卡片里的标签沿一条轴排列，可以使用 Flex；但 Flex 不会自动决定哪些内容应该成为同级卡片。

看活动列表的真实界面：标注会落在网格容器、列、行、单张卡片和卡片间距上。

• 点击编号或说明行可以固定当前部件，悬停离开后恢复已固定的部件。
• 标注来自真实 DOM 的部件，不用图片坐标猜测网格位置。

三个预览都使用同一组活动卡；差异只来自间距、卡片高度和视觉重点，筛选属于节点 5 的行为。

选择“设计基础”后，当前网格只保留匹配课程；筛选条件和结果都留在同一个真实卡片集合里。

判断重点是对象关系：什么时候用卡片网格，取决于用户是否要先扫多个同类对象。

• 什么时候用：每张卡片代表一个同类对象，用户先扫标题和摘要，再进入详情。
• 什么时候换用表格：价格、状态和更新时间需要逐列对齐时，表格更可靠。

怎么判断：先看用户是在扫对象，还是在核对字段；前者用卡片网格，后者换用表格。

请用 Card Grid 实现周末活动列表：每张卡片包含活动名、时间、地点和“查看详情”入口；桌面端 3 列、列行间距 16px，390px 与 320px 时改为单列，不拉伸文字、不制造横向滚动；卡片使用真实 DOM 和项目布局变量，键盘可以按顺序访问每张卡片的入口。