Rows, columns, and grids

Use grid or horizontal stack layout components for side-by-side fields such as city and state or first and last name.

Vertical vs horizontal

Example: shipping address form

This walkthrough uses a Shipping address form with horizontal Stack rows for name and city fields.

Step 1: Add a horizontal Stack

1. Open Components.
2. Search for Stack.
3. Drag Stack onto the canvas.

Step 2: Set direction to row

1. Select the row Stack in Tree (for example nameRow).
2. On Main, set Direction to row.
3. Set Spacing (for example 16px).

Step 3: Add fields to the row

1. Drag First name and Last name Text field components into the row Stack.
2. Add a full-width Street address field below the row.
3. Add a second horizontal Stack with City, State, and ZIP / Postal.

Step 4: Check the canvas

Step 5: Verify in Tree

1. Open Tree → Expand all.
2. nameRow and cityRow should each list their child fields indented underneath.

Test responsive layout

Compare Desktop and Mobile preview so side-by-side fields still read well on narrow screens.

1. Click Preview.
2. Click Desktop or Mobile in the header toolbar (next to Preview / Edit).
3. Confirm fields stack or wrap readably on Mobile.

Developers: Responsive breakpoints and advanced layout rules are documented in Adaptive layout.

Summary

Use grid or stack components for multi-column rows. Preview the form in Mobile mode after layout changes.

See also

• Spacing and alignment basics
• Adaptive layout (developers)