Beyond basic Auto Layout, these advanced features give you precise control over complex, responsive designs. Master these to build production-ready components.
Text Baseline Alignment
Align items to text baseline instead of edges:
- Enable in Auto Layout settings
- Items align to first line of text
- Perfect for mixed-size text rows
- Labels + icons align naturally
Use for: Navigation items, form labels with icons, mixed typography.
Auto Gap Distribution
Automatically distribute extra space:
- Enable "Auto Gap" in settings
- Space distributes evenly between items
- Similar to CSS
space-between - Items push to edges, gaps grow
Use for: Navigation bars, footer links, button groups.
Individual Padding
Set different padding per side:
- Click the padding link icon to unlink
- Set Top, Right, Bottom, Left separately
- Essential for asymmetric layouts
Common patterns:
- Cards: More padding on sides than top/bottom
- List items: Padding left for indent
- Headers: Extra padding top
Stacking Order
Control how children overlap:
- First on Top - First child renders above
- Last on Top - Last child renders above (default)
Use for: Avatar stacks, overlapping cards, layered badges.
Absolute Positioning Within Auto Layout
Remove items from flow while keeping in parent:
- Select child in Auto Layout
- Enable "Absolute Position"
- Item ignores Auto Layout flow
- Use constraints to position
Use for: Badges, close buttons, decorative elements.
Negative Spacing
Create overlapping items:
- Enter negative values for gap
- Items overlap by that amount
- Combine with stacking order
Use for: Avatar stacks, card cascades, overlapping chips.
Min/Max Width Constraints
Control child sizing bounds:
- Min Width - Don't shrink below
- Max Width - Don't grow above
- Works with Fill sizing
Use for: Responsive buttons, fluid containers with limits.
Canvas vs Absolute Sizing
How children calculate size:
- Canvas - Size relative to parent
- Absolute - Fixed pixel size
Important for responsive behavior.
Wrap Behavior
When items overflow:
- No Wrap - Items stay in single line
- Wrap - Items flow to next line
Wrap settings:
- Row Gap - Space between wrapped rows
- Align Content - How rows distribute
Complex Nesting Strategies
Two-Column Layout
- Outer: Horizontal Auto Layout
- Left: Fixed width sidebar
- Right: Fill container main area
Card with Pinned Footer
- Outer: Vertical, Fill height
- Content: Fill (grows)
- Footer: Hug (stays at bottom)
Responsive Nav
- Outer: Horizontal, space-between
- Logo: Hug
- Links: Auto Layout, gap
- CTA: Hug
Tips
- Use baseline alignment for text-heavy UIs
- Negative spacing creates visual depth
- Absolute position for decorative elements
- Min/max constraints prevent layout breaking
- Test wrapping at various widths