Skip to main content
Spacers, dividers, stacks, and grids are non-data layout widgets. They carry no data of their own; you place them on the canvas alongside charts, text, and controls to add whitespace, visual structure, and grouping to a dashboard.

Spacer

A spacer is an empty, resizable box. Use it to add deliberate whitespace between widgets — for example, to separate a header row from the charts below it, or to push a widget into a particular column. A spacer is only visible while you are editing in the dashboard builder. On the published dashboard (including embedded views) it renders as empty space, so it never draws a card or border for viewers.

Divider

A divider is a horizontal separator line that breaks up the layout flow — a lightweight way to signal the boundary between sections of a dashboard. Unlike other widgets, a divider is a fixed height and cannot be resized vertically.

Stack

A horizontal stack or vertical stack is a container that groups several widgets and lays them out evenly — side by side in a horizontal stack, or top to bottom in a vertical stack. Use a stack to keep a set of related widgets aligned and sized together, instead of positioning each one on the grid by hand. Place a stack on the canvas and resize it to any width and height; its children always share that space evenly:
  • In a horizontal stack, each child takes the full height and an equal share of the width.
  • In a vertical stack, each child takes the full width and an equal share of the height.
Add a widget to a stack by dragging it in — from the canvas, the Add Widgets menu, or another stack — and remove one by dragging it back out; the remaining children redistribute to fill the space. Stacks can be nested inside one another. Because a stack owns its children’s layout, you work with the container as a unit: select, move, resize, or delete the stack itself and it carries its children with it. Individual widgets inside a stack are not separately selectable on the board — a marquee drawn over a stack selects the container, not its children. To rearrange children, drag one to a new position within the stack; to take one out, drag it onto the canvas or into another container.

Grid

A grid is a container whose children each hold a fixed cell position and size, unlike a stack’s evenly shared space. A grid is a window into the same uniform cell grid as the board that holds it, so a child keeps the exact footprint you give it — nothing is auto-compacted, swapped, resized, or moved to make room. Dragging, resizing, or dropping a widget onto a cell that’s already occupied is rejected and the widget stays where it was. Click the grid’s header to select it and drag its resize grip to change its size; resizing only crops or restores empty rows and columns (a grid can’t shrink below 2×2 or cut into an occupied cell). Give the grid a title by clicking into the header once it’s selected. A grid can be nested inside the root board or inside another grid, but not inside a stack.

Adding a layout widget

In the dashboard builder, open the Add Widgets menu in the toolbar and choose Spacer, Divider, Horizontal Stack, Vertical Stack, or Grid. The widget is added to the canvas, where you can drag it into place and resize it (a divider resizes horizontally only).

Styling

The spacer and divider follow the dashboard’s widget styling settings:
  • The divider draws its line using the widget border width, style, and color.
  • A spacer picks up the same border and background settings while you are editing, so its bounds are easy to see.
A stack draws no card of its own — it only groups and sizes its children, each of which keeps its own styling. A grid draws a header band with its title, visible to viewers on the published dashboard too.