Grid layout
Arrange frame children in rows and columns using CSS-style grid layout.
What grid layout is
Grid layout arranges a frame's children in a two-dimensional grid of rows and columns. Unlike stack (one-dimensional), grid places items across both axes simultaneously, making it ideal for galleries, card decks, dashboards, and any layout with a repeating cell structure.
Grid layout applies to frames only. Select a frame and set its layout mode to Grid in the inspector to activate it.
Grid settings
| Setting | What it controls |
|---|---|
| Columns | Number of column tracks |
| Rows | Number of row tracks (auto-creates rows when content overflows) |
| Column gap | Space between each column |
| Row gap | Space between each row |
| Padding | Inner space between the frame edge and its grid content |
| Auto rows | Height of automatically-created overflow rows |
Column and row sizing
Each track can be set to a fixed pixel size or to auto (size to the content of the tallest or widest cell in that track). Select individual track lines in the inspector to set them independently.
Child item settings
When you select a child of a grid frame, additional controls appear:
- Column span — how many columns the item occupies (default: 1).
- Row span — how many rows the item occupies (default: 1).
Children flow sequentially into available cells. Manual column or row start placement is not exposed in the current inspector UI.
How to set up a grid layout
- Select a frame.
- In the Frame layout section of the inspector, click the layout mode selector and choose Grid.
- Set the number of columns and the column gap.
- Add or select children — they fill cells left-to-right, top-to-bottom by default.
- Select a child and adjust its span if it should occupy multiple cells.
Tips
- Start with column count and column gap, then set a fixed track size. Rows usually size themselves automatically.
- Use column span to create a featured card that spans the full width while other cards occupy individual cells.
- Set a consistent row height for uniform card decks — use auto rows to enforce it.
- Grids work well inside a fixed-size frame or a frame with fixed-width and fit-content height.