App Studio
Pane Layout
Each Pane has a configurable layout — grid or flex — with columns, gap, padding, and alignment properties that can be overridden per breakpoint.
Grid Layout
Grid layout is the most common choice for App Studio Panes. It provides a 12-column CSS Grid where widgets are placed using start/span positions.
// Grid Pane layout configuration
{
"type": "grid",
"columns": 12, // number of grid columns (default 12)
"gap": 20, // gap between grid cells in pixels
"rowHeight": "auto", // "auto" or fixed pixel height per row
"padding": 24 // inner padding of the pane in pixels
}
Flex Layout
Flex layout uses CSS Flexbox — ideal for toolbars, button groups, and any single-axis arrangement.
// Flex Pane layout configuration
{
"type": "flex",
"direction": "row", // "row" | "column"
"gap": 12, // gap between flex items
"alignItems": "center", // "start" | "center" | "end" | "stretch"
"justifyContent": "flex-start", // "flex-start" | "center" | "flex-end" | "space-between"
"wrap": false, // allow wrapping to next line
"padding": 16
}
PaneLayoutConfig Reference
| Property | Grid | Flex | Description |
|---|---|---|---|
type | required | required | "grid" or "flex" |
columns | required | — | Number of grid columns (typically 12) |
gap | optional | optional | Spacing between widgets in pixels (default 16) |
padding | optional | optional | Inner pane padding in pixels (default 0) |
rowHeight | optional | — | "auto" or fixed pixel height per row |
direction | — | required | "row" or "column" |
alignItems | — | optional | Cross-axis alignment |
justifyContent | — | optional | Main-axis distribution |
wrap | — | optional | Allow flex wrap (default false) |
background | optional | optional | "transparent" | "surface" | hex color |
borderRadius | optional | optional | Pixel border radius for pane container |
Breakpoint Overrides on Pane Layout
Any Pane layout property can be overridden per breakpoint. Only specify the changed properties:
// Pane with breakpoint-specific layout
{
"paneId": "kpi-row",
"layout": {
"type": "grid", "columns": 12, "gap": 20, "padding": 24
},
"layoutBreakpoints": {
"tablet": { "columns": 8, "gap": 16 },
"mobile": { "type": "flex", "direction": "column", "gap": 12, "padding": 16 }
}
}
// Mobile switches from grid to flex column — widgets stack vertically
Design Tip: Grid for Most Panes
Start with grid layout for most content panes. Switch to flex layout only for toolbars, action bars (row of buttons), or single-axis lists. Mixed panes (grid inside flex inside grid) are supported via Container widgets.