展现形式 · 概念
Grid：并列浏览与比较的网格布局
Grid 网格布局何时帮助扫描和比较同类项目，何时造成拥挤、伪等权与移动端重排问题，并说明 DOM 顺序、空状态和大量项目时的处理。
Grid 把同层项目放进规则化的行列，让访客快速扫描、发现重复结构并进行轻量比较。它描述空间关系，不规定单元必须是商品、文章、图片或 Card。
适合与不适合
适合同类项目具有相近信息结构、没有严格阅读顺序，且访客需要先浏览再选择的场景。不适合连续叙事、步骤流程、字段差异巨大或必须逐项读完的内容；这些情况通常更适合 List 或正文。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 同屏呈现多个入口，扫描效率高 | 列数过多会压缩文本和点击区域 |
| 重复结构便于比较同类信息 | 视觉等宽可能制造并不存在的等权关系 |
| 可按容器宽度逐级重排 | 高度差异会破坏行列节奏 |
| 容易表达集合和分类 | 视觉排序与 DOM 顺序不一致会造成理解问题 |
内容与布局要求
同一 Grid 内的项目应共享一组最低信息字段和清楚的选择动作。先由内容最小可读宽度决定列数，再决定断点；不要为了填满最后一行补虚构项目。需要强调某项时，应给出明确的推荐理由，不只依赖跨度或颜色。
响应式与无障碍
缩窄或放大文本时，项目应在不丢失信息和功能的前提下重排。DOM 顺序必须与主要阅读顺序一致，不能仅用 CSS 把最后一项视觉移动到最前。网格中的标题保持合理层级；整项可点击时避免制造多个重复链接或嵌套交互控件。视觉网格布局通常用列表语义表达集合，不应套用 ARIA grid 角色；该角色用于需要方向键导航的交互式数据网格。
状态与退化
零项时显示与业务语境一致的空状态；一项时允许退化为单列，不要保留假想的多列空间；数量很大时提供筛选、排序或分页。CSS 不可用时，项目应按 DOM 顺序成为可读的纵向序列。
发布前检查
- 各项目是否真的是同层、同类对象？
- 最长标题和最差图片比例是否测试过？
- 320 CSS 像素宽与文本放大时是否需要横向滚动？
- 键盘焦点是否按视觉阅读顺序移动？
- 一项、奇数项和大量项目时是否仍自然？