作品集、商品列表、项目精选、文章专辑——卡片结构一致，用户靠标题和图扫描，列数随宽度自适应。
网格实验台：列数随宽度跳，卡片不被拉伸
切宽度、密度和筛选，观察列数和物件本身的变化；末行不满也保持等宽，空数据走空状态。
任务：这是「项目精选」网格，6 张同结构卡片。切宽度看列数怎么跳、切密度看间距怎么变、选「运营」看空状态——判断卡片有没有被拉伸变形。
判断与下一步：当前桌面 3 列、舒适间距；显示全部 6 张卡片，末行 2 张等宽不被拉伸。
面板里测到的结论
刚才列数和间距的变化，对应的是等宽列、统一间距和末行不拉伸这三条规则。
- 列数随断点跳变：桌面 3 列、平板 2 列、手机 1 列；卡片内部结构（标题、标签、摘要）始终一致。
- 卡片等宽不拉伸：用 minmax(0, 1fr) 让每张卡占一列；末行不足时左对齐留空，不为「填满」拉宽任何一张。
- 间距统一：gap 在所有卡片之间一致；切密度只改 gap 数值，不改卡片结构或列数。
- 空数据走空状态：筛选无结果时显示解释和恢复动作，而不是留一片不知原因的空白网格。
什么时候用卡片网格
同结构、可扫描、以「卡」为单位浏览的内容集合；信息差异大或要精确对齐数字时换别的组件。
每行字段差异大、要精确对齐数字或比较多列时用表格；纯线性时序用列表；强阅读连续性用居中单栏。
怎么从需求走到网格
先定卡片结构，再选断点列数，最后处理间距、末行和空状态。
- 定卡片结构：标题、副信息、摘要、操作；同一网格内每张卡用同一结构。
- 选断点列数：minmax(0, 1fr) 配 auto-fit 或固定列数；窄屏减列，不靠媒体查询硬切宽度。
- 统一 gap 与卡片内边距，末行不强制填满；空数据走空状态并给恢复路径。
同一网格：末行处理的正例与反例
目标都是把 5 张卡排进 3 列网格。差异只在末行是否被强行填满。
桌面 3 列、5 张卡片：第二行 2 张，第 3 列留空。卡片宽度始终等于 1fr，末行不被拉宽，扫视节奏一致。
差异：用 minmax(0,1fr) 等宽，末行不强制填满。为了「不留空」，把第二行 2 张卡各拉到 1.5fr 宽。末行卡片比首行宽一半，标题换行、对齐错乱，用户以为它们更重要。
差异：只改一处——末行强制填满，等宽就被破坏。快速自测
桌面 3 列的卡片网格只有 4 张卡，第二行只放了 1 张。这张卡应该怎么显示？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。