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.
• Move and Resize Events — Listen while an interaction runs and when it ends.

Interaction constraints

• Drag and Resize Handles — Restrict interactions to dedicated handles.
• 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.

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.