XGRID

是什么

为每个公共页面在桌面、平板和移动端提供一致、内容感知的空间布局。

为什么

固定画布布局在不同设备上会失效。XGRID 通过自适应列模型（12/8/1）和内容自适应尺寸而非固定面板高度解决。

如何

令牌 + 布局图 → 坐标引擎 → DOM。仅客户端。

• 定义桌面/平板/移动断点与列数
• 驱动每页布局图（web/assets/data/<page>.layout.json）
• 提供内容自适应尺寸原语（minmax、clamp、auto-fit）
• 保持设计参考而非固定画布

示例

同一坐标系（design/xgrid.json）通过坐标引擎将桌面 bento 重排为平板或移动端堆叠。

输入

• 每页布局图
• 断点/令牌配置（design/xgrid.json）

输出

• 由坐标引擎应用的自适应网格坐标

依赖

生命周期

• 空间网格 v1
• 自适应空间 v2（12/8/1）

使用场景

• UI 从桌面 bento 自适应为平板与移动堆叠
• 设计师与开发者共享一个网格契约

限制

• 1920x1080 画布仅为设计参考
• 不是设备像素强制——内容自适应

人们常问的问题

这些问题由本页内容解答。

• 什么是 XGRID？
• AENET 自适应网格如何工作？
• XGRID 每种设备使用多少列？

证据

仅已验证状态——本页内容均非预测。

• design/xgrid.json
• docs/COORDINATE_LAYOUT.md
• ui-contract/coordinates.json