Grid Layout

Grid Layout enables true two-dimensional layouts with rows and columns. Unlike Auto Layout (flexbox), Grid lets you place items in specific cells and span across multiple rows or columns.

Grid vs Auto Layout

Grid Layout	Auto Layout
Two-dimensional (rows + columns)	One-dimensional (row OR column)
Place items in specific cells	Items flow sequentially
Items can span cells	All items same size or fill
Great for complex layouts	Great for component layouts

Enabling Grid Layout

1. Select a frame
2. In Properties panel, click Layout dropdown
3. Choose "Grid"
4. Configure columns and rows

Grid Configuration

Columns

• Count - Number of columns
• Width - Fixed, Auto, or Fractional (fr)
• Min/Max - Responsive column sizing

Rows

• Count - Number of rows (or auto)
• Height - Fixed, Auto, or Fractional
• Auto Rows - Height for implicitly created rows

Gaps

• Column Gap - Horizontal space between columns
• Row Gap - Vertical space between rows
• Can be different values

Placing Items

Automatic Placement

• Items fill cells in order
• New rows created as needed
• Similar to Auto Layout behavior

Manual Placement

• Select an item in the grid
• Set Column Start/End in Properties
• Set Row Start/End in Properties
• Or drag item to specific cell

Spanning Cells

Column Span

• Select item
• Set "Column Span" to number of columns
• Item stretches across multiple columns

Row Span

• Select item
• Set "Row Span" to number of rows
• Item stretches down multiple rows

Both Directions

• Combine column and row spans
• Create large feature areas

Cell Alignment

Align Items (All)

• Set on the grid container
• Affects all items in the grid
• Options: Start, Center, End, Stretch

Justify/Align Self (Per Item)

• Set on individual items
• Overrides container alignment
• Position item within its cell

Responsive Patterns

Auto-Fill

• Columns auto-generate based on width
• Set minimum column width
• Grid creates as many columns as fit

Fractional Units

• Use 1fr for equal distribution
• Use 2fr for double width
• Mix with fixed widths

Common Patterns

Image Gallery

• Equal column grid
• Auto rows
• Some images span 2x2

Dashboard Layout

• 12-column grid
• Widgets span different amounts
• Sidebar spans all rows

Magazine Layout

• Complex column spans
• Featured content spans multiple cells
• Text flows around images

Tips

• Use Grid for page layouts, Auto Layout for components
• Fractional units make responsive grids easy
• Name grid areas for clarity
• Grid exports as CSS Grid
• Combine with Auto Layout for nested layouts