|
| 1 | +--- |
| 2 | +title: Grid container |
| 3 | +description: Group widgets into a nested grid so you can arrange, resize, and move them together on a dashboard. |
| 4 | +--- |
| 5 | + |
| 6 | +A grid container is a widget that holds other widgets in its own grid. Use it to group related tiles — a chart with its controls, a section of KPIs, a labelled block of text and visuals — so they can be arranged, moved, and resized as a unit. Containers can be nested, letting you build structured, multi-section layouts on a single dashboard. |
| 7 | + |
| 8 | +## Adding a grid container |
| 9 | + |
| 10 | +In the [dashboard builder][ref-workbooks], open the **Add Widgets** group in the toolbar and drag the **Grid** entry onto the canvas. The container is added with an empty inner grid, and its settings panel opens so you can size the grid right away. |
| 11 | + |
| 12 | +<Steps> |
| 13 | + <Step title="Drag a Grid onto the canvas"> |
| 14 | + Open **Add Widgets** in the toolbar and drop the **Grid** entry where you want the container. |
| 15 | + </Step> |
| 16 | + <Step title="Set the inner grid size"> |
| 17 | + In the settings panel that opens, set the number of **Columns** and **Rows** for the container's inner grid. It starts as a 2 × 2 grid. |
| 18 | + </Step> |
| 19 | + <Step title="Add widgets into it"> |
| 20 | + Drag charts and other widgets straight into the container — see [Adding widgets to a container](#adding-widgets-to-a-container) below. |
| 21 | + </Step> |
| 22 | +</Steps> |
| 23 | + |
| 24 | +## The inner grid |
| 25 | + |
| 26 | +Each container has its own grid, independent of the dashboard's grid. The **Columns** and **Rows** you set describe that inner grid, and it fills the whole container surface — so the container's cells resize with it rather than being tied to the dashboard's column width. Grid lines are shown while you're editing so you can see where widgets will land. |
| 27 | + |
| 28 | +The grid grows a new row automatically when a widget is placed or resized past the current bottom edge, so you never run out of room while arranging. |
| 29 | + |
| 30 | +## Adding widgets to a container |
| 31 | + |
| 32 | +You can add most widget types to a container — charts, text, AI summaries, controls, spacers, and dividers, as well as other grid containers. |
| 33 | + |
| 34 | +- **From the toolbar** — drag a widget from the **Add Widgets** or **Add Controls** group and drop it directly onto the container, in one step. |
| 35 | +- **Charts** — pick a report from the **Charts** picker and drop it onto the container. |
| 36 | +- **Move an existing widget in** — drag a widget already on the dashboard into the container to move it inside. |
| 37 | + |
| 38 | +Dropped widgets snap to the container's grid cells, and you can resize and rearrange them afterwards like any other widget. |
| 39 | + |
| 40 | +## Arranging widgets |
| 41 | + |
| 42 | +- **Move the container** — drag the container on the dashboard; its child widgets keep their positions relative to each other. |
| 43 | +- **Resize the container** — drag the resize grip on its bottom-right corner. Shrinking the container scales its children down to keep them in view. |
| 44 | +- **Resize a child** — drag a child widget's resize grip to change its width or height within the grid. |
| 45 | +- **Move a widget out** — drag a child out of the container and onto the dashboard to promote it back to a top-level widget. The dashboard reflows to make room below the drop point. |
| 46 | + |
| 47 | +## Distribute evenly |
| 48 | + |
| 49 | +Turn on **Distribute evenly** in the container's settings to give every child the same width and height, laying them out as an even grid. This is handy when a container holds a set of comparable tiles — for example a row of KPIs — that should all be the same size. With it off, each child keeps the size you gave it. |
| 50 | + |
| 51 | +## Nesting containers |
| 52 | + |
| 53 | +A grid container can hold another grid container. Drop a **Grid** into an existing container the same way you'd add any other widget, then add widgets into the nested grid. Use nesting to build sections within sections — for example, a top-level container per dashboard area, each holding its own arranged set of charts and controls. |
| 54 | + |
| 55 | +## Editing and removing |
| 56 | + |
| 57 | +Every container shows a settings gear on its top-right corner. Click it to open the menu: |
| 58 | + |
| 59 | +- **Edit** — open the settings panel to change the **Columns**, **Rows**, or **Distribute evenly** options. |
| 60 | +- **Delete** — remove the container and everything inside it from the dashboard. |
| 61 | + |
| 62 | +[ref-workbooks]: /docs/explore-analyze/workbooks |
0 commit comments