UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Edge-to-Edge vs Contained Layout

Edge-to-Edge vs Contained Layout turns a frequent interface judgment into an executable constraint before generation.

layoutcontainerviewport

Design Principle

Page width is an information architecture decision; not every region belongs in the same max-width container.

Principle Page width is an information architecture decision; not every region belongs in the same max-width container.

Design action Constrain prose and forms; allow canvases, maps, and timelines to go full-width; use bands or alignment lines when switching modes.

Examples Positive example: A page mixes visual scenes, prose, tables, or tools. Counterexample: Long text spans the full ultrawide viewport.

Apply when A page mixes visual scenes, prose, tables, or tools. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Constrain prose and forms; allow canvases, maps, and timelines to go full-width; use bands or alignment lines when switching modes.

Apply When

  • A page mixes visual scenes, prose, tables, or tools.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Long text spans the full ultrawide viewport.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
84%
Version
v1
Published
6/6/2026