Combine layout guides (grids) with constraints to create powerful responsive designs. Understanding how these features work together gives you precise control over how elements behave when frames are resized.
Core Concept
Constraints define how objects respond when you resize parent frames. Layout guides provide visual alignment aids. When combined:
- Stretch grids - Constraints are evaluated relative to grid columns/rows
- Fixed grids - Constraints are evaluated relative to the parent frame
Stretch Layout Guides
When using stretch grids, Azyrom evaluates constraints relative to the grid column or row the element belongs to:
- Left constraint - Element stays fixed distance from its column's left edge
- Right constraint - Element stays fixed distance from its column's right edge
- Left & Right - Element stretches to maintain distances from both column edges
- Center - Element stays centered within its column
- Scale - Element scales proportionally as the column resizes
The same applies to rows:
- Top constraint - Element stays fixed distance from its row's top edge
- Bottom constraint - Element stays fixed distance from its row's bottom edge
- Top & Bottom - Element stretches vertically within its row
- Center - Element stays vertically centered within its row
- Scale - Element scales proportionally as the row resizes
Key insight: Stretch layout guides adapt to the size of the frame. This allows your designs to respond when you resize the frame, while elements maintain their constraint relationships to the layout guide itself.
Fixed Layout Guides
When using fixed grids:
- Column widths and row heights remain constant when the frame resizes
- Constraints are evaluated relative to the parent frame, not the grid
- Elements relate directly to the frame boundaries
How Azyrom Detects Grid Cells
When applying constraints with a stretch grid present:
- Azyrom identifies which column the element belongs to based on its position
- Azyrom identifies which row the element belongs to
- Constraints are calculated relative to those grid cell boundaries
- When the frame resizes, grid cells stretch and elements respond according to their constraints
Example: Responsive Card Layout
- Create a frame with a 3-column stretch grid
- Place a card element in the first column
- Set the card's horizontal constraint to "Left & Right"
- Resize the frame - the card stretches to fill its column
- Duplicate the card to other columns for a responsive row
Best Practices
- Use stretch grids for responsive web/app layouts where columns should scale
- Use fixed grids for precise alignment guides that shouldn't change
- Nest frames within frames for enhanced control over different responsive behaviors
- Mirror HTML structure - nested frames work like HTML
<div>containers - Test by resizing - always test your layout by resizing frames to verify behavior
Constraint Quick Reference
| Constraint | With Stretch Grid | With Fixed Grid |
|---|---|---|
| Left | Relative to column left | Relative to frame left |
| Right | Relative to column right | Relative to frame right |
| Left & Right | Stretch within column | Stretch within frame |
| Center | Center in column | Center in frame |
| Scale | Scale with column | Scale with frame |
Related Topics
- Layout Grids - Setting up column, row, and grid guides
- Constraints - Detailed constraint options
- Auto Layout - Automatic responsive layouts