Skip to content

Layout Decision Tree

Rezi has a “simple first” layout philosophy: fixed and flex layouts stay simple; constraints are for relational/derived rules.

Decision tree

Need to set a size?

  1. Fixed cells
  2. Use: width: 24, height: 3

  3. Avoid: expr("24")

  4. Share space with siblings

  5. Use: flex: 1 (and flexShrink/flexBasis when needed)

  6. Avoid: manual parent.w / n math in view code

  7. Smooth scaling with viewport

  8. Use: fluid(min, max, options?)

  9. Derived relationships (relational intent)

  10. Use helper constraints (preferred):
    • visibilityConstraints.*
    • widthConstraints.*
    • heightConstraints.*
    • spaceConstraints.*
    • groupConstraints.*
    • conditionalConstraints.*

  11. Use expr("...") when helpers don’t express the rule

  12. 2D arrangement

  13. Use: ui.grid({ columns: number | string, ... })
  14. For responsive columns in alpha: compose multiple grids and switch via display

Visibility rule of thumb

  • Layout/viewport visibility on supported layout widgets → display: ... constraint
  • Business logic visibility → show(...) / when(...) / maybe(...) / match(...)
  • docs/guide/constraints.md
  • docs/reference/constraints-api.md
  • docs/reference/constraint-expressions.md
  • docs/guide/constraint-recipes.md