Container¶
The Container widget is a plain box that holds other widgets and lines them up in a row or a column. It is the basic building block for arranging a page: put two charts in a container with a row direction to show them side by side, or stack a heading, a text and a table in a column. The container itself has no look of its own unless you give it a background or padding.
See also Section for a card with a title, Grid Layout for a fixed grid of cells, and Sidebar Layout for a page shell with a sidebar.
Using it¶
Drop a Container onto the page and drag widgets into it. A new container stacks its children top to bottom. To put them side by side, open Box Style and set Flex direction to Row. Use Column gap to add space between them, and Justify content and Align items to spread or centre them.
Options¶
Everything a container does comes from its Box Style.
| Option | Values | Default | Description |
|---|---|---|---|
| Display | Flex · Inline Flex · Block · Inline · Inline Block · None | Flex | How the box is laid out. Flex is the one that arranges children in a row or column |
| Overflow | Visible · Hidden · Scroll · Auto · Clip | Not set | What happens to content that does not fit in the box |
| Column gap / Row gap | Any CSS unit | None | Space between the children |
| Flex direction | Row · Column · Row reverse · Column reverse | Column | Which way the children line up |
| Flex wrap | No wrap · Wrap · Wrap reverse | Not set | Whether children move to a new line when they run out of room |
| Justify content | Start · Center · End · Space between · Space around · Space evenly · Stretch | Not set | How children are spread along the direction they line up in |
| Align items | Start · Center · End · Baseline · Stretch | Not set | How children are aligned across that direction |
| Width / Height | Any CSS unit | Not set | A fixed size for the box |
| Background | A theme or custom color | None | A fill color behind the children |
| Padding / Margin | Any CSS unit, per side | None | Space inside and around the box |
| Style | CSS | Minimum height 20px | Any other CSS for the box |
Tips¶
A few things to keep in mind:
- The gap, flex and size controls appear only when Display is Flex or Inline Flex.
- A new container stacks its children vertically. Set Flex direction to Row for a side-by-side layout.
- For a card with a header and an optional footer, use Section. For fixed rows and columns, use Grid Layout.