Auto Layout Grid

Auto Layout Grid is the two-dimensional flow mode inside Auto Layout. It keeps the same history, relayout, and collaboration behavior as stack Auto Layout, but adds track-based placement.

The /docs/api/managers/auto-layout-grid page includes:

• a Grid Basics demo for rows, columns, gaps, track values, and item spans,
• a Conversion demo for switching one container between wrapped stack, grid, and vertical stack through the shared convertAutoLayoutFlow() command,
• a Track Editing demo for appending, resizing, and deleting tracks,
• an Item Move demo for moving a nested Auto Layout child and auto-expanding the grid.
• the same shared command paths that power keyboard cell navigation, direct canvas drag placement, and canvas span handles.

Current Workflow

1. Enable Auto Layout on a frame or group.
2. Switch Flow to Grid.
3. Set columns, rows, columnGap, rowGap, autoFlow, and default cell alignment.
4. Select a child and set explicit row, column, span, or per-item alignment.

Frame Controls

• Columns and rows are stored as track arrays.
• Track modes are fixed and fr.
• columnGap and rowGap control spacing between cells.
• autoFlow controls whether implicit placement grows row-first or column-first.
• Frame alignX and alignY control default alignment inside each cell.
• The canvas track labels expose + buttons at the far right of the column labels and at the bottom of the row labels. These buttons append tracks through the same Grid owner command as the API.

Item Controls

• column and row set explicit cell placement.
• columnSpan and rowSpan expand the item across multiple tracks.
• Item alignX and alignY override the frame default for one child.
• Clear row or column to return the item to implicit placement.
• Selected Grid items expose always-visible span handles on canvas for row / column spanning.
• Move the selected Grid item by dragging the item itself to a target cell. The canvas no longer exposes separate reposition dots for this flow.
• Arrow keys move the selected Grid item by one cell. Shift + Arrow jumps farther on the same Grid command path.

Current Scope

• Grid currently uses the same Auto Layout container type as stack flow.
• Use setAutoLayoutFlow(), setAutoLayoutGrid(), and setAutoLayoutItemGrid() for direct API control.
• Use convertAutoLayoutFlow() when you need to preserve the current wrapped geometry while switching a container between stack and grid.
• getAutoLayoutPanelState() and applyAutoLayoutPanelChange() reflect the same frame-level and item-level Grid state that the property panel edits.

Property Panel Notes

• The property panel now includes a visual Grid picker for row and column counts.
• The picker matrix is capped on purpose. When the current Grid is larger than the visible picker, the panel shows an overflow summary instead of rendering the entire matrix.
• Row / column count inputs support arithmetic expressions.
• Track value inputs support arithmetic expressions and A / Auto.
• A / Auto map to the existing fr:1 semantics; Designful does not store a third track mode.

Intentional Differences

• There is no dedicated “create directly into an empty Grid cell” tool flow yet.
• Generic duplicate is intentionally reused for Grid items. Duplicating a selected Grid item keeps it in the same Grid container and uses the shared auto-layout duplicate path.

See /docs/api/managers/auto-layout-grid for the focused API reference.

Direct track mutation APIs

Grid track arrays can now be changed directly through the editor API:

• appendAutoLayoutGridTracks(frameId, 'column' | 'row', count?) appends tracks and is the same command used by the canvas + controls.
• resizeAutoLayoutGridTracks(frameId, 'column' | 'row', updates) updates one or more track definitions in a single command.
• removeAutoLayoutGridTracks(frameId, 'column' | 'row', indexes) removes tracks and relocates affected items without leaving invalid explicit placements behind.
• moveAutoLayoutGridItems(frameId, itemIds, { column, row }) moves one or more direct children to a target cell and expands tracks when the target exceeds the current grid bounds.
• generateCssGridExport(container, objects) converts the current Grid container into CSS Grid-compatible style maps for export and inspection.
• Absolute Grid children export as absolute overlays using their current local geometry. The exported container adds position: relative when any absolute Grid child is present.

The docs page /api/managers/auto-layout-grid includes live demos for track editing and item moves.