Pages

Containers

Containers are structural layout elements used to group and arrange UI components within a defined space. They determine how child elements behave in terms of size, position, and responsiveness.

There are three types of Containers, each with a distinct layout logic:

1. Resizable Container

Elements inside keep their position but adapt in size when the container resizes. The proportions between elements and container dimensions are preserved. Best suited for responsive layouts where scaling is important.

2. Static Container

Elements stay fixed in absolute pixel positions. Their size and placement do not respond to container scaling. This is best for precise or legacy layouts where static design is preferred.

When to use Containers?

• Use Resizable when proportional scaling is needed across screen sizes.
• Use Static when pixel-accurate placement is essential or when working with fixed-size UIs.

Each container supports nesting and can contain any type of UI elements including buttons, inputs, outputs, and overlays.