new_row
Build a responsive multi-column row container for placing children side by side; auto-collapses to fewer columns on tablet and mobile, ideal for feature cards, category tiles, footer columns, and hero layouts.
Instructions
Build a multi-column ROW container: children laid out SIDE BY SIDE (not stacked). This is how real pages build feature cards, category tiles, footer columns, a 2-col hero, etc. The row is RESPONSIVE — it auto-collapses to fewer columns on tablet/mobile (default tablet 2, mobile 1) so cards never become cramped slivers. Place the returned node as a child inside a section (section children still stack vertically; nest a row for horizontal layout). Example children: [{ "type":"container", "children":[{"type":"image","opts":{...}},{"type":"text","opts":{...}}] }, { ... }, { ... }]
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| row_gap | No | Vertical gap (px) between wrapped rows (default 24) | |
| children | No | Child specs, one per column (laid out left-to-right) | |
| collapse | No | Columns to show per breakpoint, e.g. {bp3:2,bp4:1}. Default: tablet 2, mobile 1. | |
| col_widths | No | Explicit per-column unit objects (length = #children), e.g. [{unit:'fr',value:2},{unit:'fr',value:1}]. Default: equal columns. | |
| column_gap | No | Horizontal gap (px) between columns (default 24) | |
| container_opts | No | Optional factory opts for the row container node itself (e.g. { style:{...} }) |