Responsive Layouts
Choose a smaller breakpoint, change a supported control, and save. Base values apply unless overridden; an override continues below its breakpoint until replaced. The main Layout mode is shared.
Layout Controls
| Layout | Typical adjustment |
|---|---|
| Vertical | Change gap, alignment, and child widths. |
| Horizontal | Use Vertical At to switch to a stack, then set Alignment When Vertical. |
| Grid | Reduce Items Per Row and adjust Space Between Items. |
| Advanced flex | Change Flex Direction, Flex Wrap, alignment, and gaps. |
| Advanced grid | Change Grid Template, gaps, and track sizing. |
Child widths, padding, gaps, and font sizes also affect fit. Percentage widths follow the containing block; viewport units follow the viewport. Hide On Breakpoint changes visibility without redesigning neighboring content.
Check intermediate widths as well as preset previews. If a change affects larger screens, confirm the selected breakpoint and whether the control supports responsive values. Reversed flex and dense grid placement change visual order without changing document order.
On this page