Examples

Start with Basic Usage if this is your first visit. Otherwise, pick the task that matches what you are building.

Core layout

• Basic Usage — Layout data, dragging, resizing, and static items.
• Adding and Removing Items — Add and remove items at runtime.
• Content-driven Height — Resize rows when rendered card content changes.
• Move and Resize Events — Listen while an interaction runs and when it ends.

Interaction constraints

• Move Handles — Restrict where a pointer move can begin and exclude interactive controls.
• Multi-direction Resize — Resize from any edge or corner and override directions per item.
• Custom Resize Handles — Replace handle visuals while retaining the configured resize directions and built-in interaction behavior.
• Items Bounded to Container — Keep items inside the grid boundary.
• Drag Threshold — Tune the distance required to begin dragging.
• Prevent Collision — Reject positions that overlap another item.
• Allow Overlap — Stack items and change their layer order.

Responsive and placement

• Responsive — Change columns and layout behavior across breakpoints.
• Predefined Responsive Layouts — Supply explicit layouts for selected breakpoints.
• Mirrored Grid Layout — Place the logical origin on the right.
• Horizontal Compaction — Compact items along the horizontal axis.
• No Compaction — Preserve empty grid space.
• Position Strategy — Compare transform, absolute, and scaled positioning.

Drag and drop

• Native Drag & Drop — Add a fixed-size item with native drag events.
• Drag From Outside — Set item sizes and drop rules for each source.
• Cross-grid Drag — Move complete items between controlled grids.

Styling

• Styling Grid Lines — Draw a grid that follows layout geometry.
• Styling Placeholder — Change the placeholder shown during an interaction.
• Grid Background — Draw grid lines with GridBackground.

Advanced API

• Config Grouping — Organize grid, drag, resize, and drop options.
• Composable API — Run the layout engine with custom markup.