gui.layouts reference

Every layout shortcut takes a children array. Most also take a props object as the second argument.

Shortcut	Renders	Reference
gui.layouts.flex	flex container	Flex
gui.layouts.horizontalFlex	flex with direction: 'row'	Flex
gui.layouts.verticalFlex	flex with direction: 'column'	Flex
gui.layouts.grid	grid container (subgrid alignment)	Grid
gui.layouts.horizontalGrid	grid with direction: 'row'	Grid
gui.layouts.verticalGrid	grid with direction: 'column'	Grid
gui.layouts.tabs	tabs	Tabs
gui.layouts.accordion	accordion	Accordion
gui.layouts.custom	your custom layout	Custom Widgets

Layout recommendation

• Use grid for rows. It enables CSS subgrid so labels, inputs, and validation messages line up across all children in a row.
• Use flex for columns. Lighter, more flexible for vertical stacks.

See also

• Tabs and Accordion — both take a sections array as the first arg, where each section has its own children.