AENET.cloud PUBLIC GATEWAY
K.PUBLIC.GATEWAY
ENไทย中文
system-detail K.PUBLIC.SYSTEM

xgrid

XGRID

The adaptive spatial grid system of the AENET public UI: desktop 12 / tablet 8 / mobile 1 columns, content-intrinsic sizing, with a 1920x1080 canvas used only as a design reference.

Status: active Last updated: 2026-08-16

System ID

xgrid

Status

active

Architecture layers

  • L2 Public Application (visual)

Inputs

  • Per-page layout maps
  • Breakpoint/token configuration (design/xgrid.json)

Outputs

  • Adaptive grid coordinates applied by the coordinate engine

Public interfaces

  • design/xgrid.json (design tokens)
  • web/assets/data/<page>.layout.json (per-page maps)

Connected systems

Security boundary

Pure client-side design system. It touches no data, no network and no private systems.

Data direction

Tokens + layout maps → coordinate engine → DOM. Client-only.

What

Give every public page a consistent, content-aware spatial layout across desktop, tablet and mobile.

Why

Fixed canvas layouts break across devices. XGRID solves this with an adaptive column model (12/8/1) and content-intrinsic sizing instead of fixed panel heights.

How

Tokens + layout maps → coordinate engine → DOM. Client-only.

  • Define desktop/tablet/mobile breakpoints and columns
  • Drive per-page layout maps (web/assets/data/<page>.layout.json)
  • Provide content-intrinsic sizing primitives (minmax, clamp, auto-fit)
  • Stay a design reference, not a fixed canvas

Example

The same coordinate grid (design/xgrid.json) reflows a desktop bento into a tablet or mobile stack through the coordinate engine.

Inputs

  • Per-page layout maps
  • Breakpoint/token configuration (design/xgrid.json)

Outputs

  • Adaptive grid coordinates applied by the coordinate engine

Dependencies

ui-contractaenet-cloud-public

Lifecycle

  • spatial grid v1
  • adaptive spatial v2 (12/8/1)

Use cases

  • The UI adapts from desktop bento to tablet and mobile stacks
  • Designers and developers share one grid contract

Limitations

  • The 1920x1080 canvas is a design reference only
  • Not a device-pixel mandate — content-intrinsic

Connected systems

  • AENET Cloud Public — The public-facing entrance and observation layer for the AENET ecosystem. It publishes sanitized snapshots, static pages, a public API and an anonymous traffic channel — nothing more.
  • RGBM — The semantic color role system of the AENET public UI. Components reference roles (navigation, action, insight, guard, system, warning) — never raw color names.
  • UI Contract — The single source of truth for the public UI structure — pages, navigation, components, coordinates, states, motion, colors, typography and locales — consumed by both the web and Swift renderers.

Questions people ask

These questions are answered by the content on this page.

  • What is XGRID?
  • How does the AENET adaptive grid work?
  • What columns does XGRID use per device?

Evidence

Verified states only — nothing on this page is a prediction.

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

Next step