App Studio
Widget Sizing
In a grid-layout Pane, widget size and position is controlled by column start, column span, row start, and row span — all configurable per breakpoint.
Grid Position Properties
| Property | Type | Default | Description |
|---|---|---|---|
colStart | 1–12 | auto | The column the widget starts at. "auto" = next available column after the previous widget. |
colSpan | 1–12 | 12 | How many columns the widget spans. colSpan 12 = full width. |
rowStart | number | "auto" | auto | Row the widget starts at. Auto-placement recommended for most widgets. |
rowSpan | number | 1 | How many rows the widget spans. Useful for tall widgets like DataGrid. |
minHeight | number (px) | — | Minimum height of the widget in pixels. |
maxHeight | number (px) | — | Maximum height. DataGrid respects this for scroll containment. |
Common Sizing Patterns
// Full-width widget (spans all 12 columns)
{ "colSpan": 12 }
// Half-width side-by-side (two widgets, each 6 columns)
// Widget A:
{ "colStart": 1, "colSpan": 6 }
// Widget B:
{ "colStart": 7, "colSpan": 6 }
// Three equal columns (4 each)
// Widget A: { "colStart": 1, "colSpan": 4 }
// Widget B: { "colStart": 5, "colSpan": 4 }
// Widget C: { "colStart": 9, "colSpan": 4 }
// Two-thirds / one-third split
// Main: { "colStart": 1, "colSpan": 8 }
// Aside: { "colStart": 9, "colSpan": 4 }
Per-Breakpoint Sizing
Widget layout is set in the Layout tab of the Properties Editor with breakpoint tabs (Desktop / Tablet / Mobile). Overrides apply the cascade — only specify what changes at each breakpoint:
// Widget layout with breakpoint overrides
{
"layout": {
"colStart": 1, "colSpan": 4 // Desktop: one-third column
},
"layoutBreakpoints": {
"tablet": {
"colSpan": 6 // Tablet: half width
},
"mobile": {
"colSpan": 12 // Mobile: full width
}
}
}
Flex Child Sizing
In a flex-layout Pane, widget sizing is controlled by flex properties instead of grid positions:
// Widget in a flex pane
{
"flexLayout": {
"flex": "1", // grow to fill available space (flex-grow: 1)
"minWidth": "200px", // minimum width before wrapping
"maxWidth": "400px", // maximum width
"alignSelf": "center" // override pane's alignItems for this widget
}
}
Resize on Canvas
You can resize widgets visually in the canvas by dragging the resize handles that appear when a widget is selected in Edit Mode. The grid snaps to column boundaries as you drag — you will see the column numbers update in real time. For precise control, use the Layout tab in the Properties Editor.