Header
Main Content
Sidebar
Article
Footer
Grid Components
Grid Columns
2 Columns
1
2
3
4
3 Columns
1
2
3
4
5
6
4 Columns
1
2
3
4
5
6
7
8
Grid Rows & Columns
2 Rows × 2 Cols
1
2
3
4
3 Rows × 3 Cols
1
2
3
4
5
6
7
8
9
Grid Flow
Flow Row (default)
1
2
3
4
5
Flow Column
1
2
3
4
5
Grid Alignment
Place Items - Center
1
2
3
4
Align Items - Stretch
1
2
3
4
Gap Variations
No Gap
1
2
3
4
5
6
Large Gap (gap=6)
1
2
3
4
5
6
Gap X=6, Y=2
1
2
3
4
5
6
Complex: Center + Padding
A
B
C
D
Custom Component (as prop)
Grid as Article
Sortable Grid Component
Sortable Photo Gallery (whole cards draggable, responsive columns)
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Photo 7
Photo 8
<SortableGrid cols={ { xs : 2 , md : 3 , xl : 4 } } gap={ 4 } defaultItems={ photos } renderItem={ photo => ( <SortableGridItem><img draggable={ false } ... /></SortableGridItem> )}/>Controlled Sortable Grid
Current order :ABCDEF
A
B
C
D
E
F
<SortableGrid cols={ 3 } gap={ 4 } items={ cards } onReorder={ next => setCards( next ) } renderItem={ card => <SortableGridItem ... /> }/>Overlay Drag Handles (cards with interactive content)
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
<SortableGrid handle defaultItems={ photos } renderItem={ photo => <SortableGridItem>...</SortableGridItem> }/>// handle : items drag only from the overlay button (top-right corner)Async Reorder with API Call (optimistic revert on failure)
<SortableGrid defaultItems={ photos } onReorder={ ( items ) => api.saveOrder( items ) } renderItem={ photo => <SortableGridItem>...</SortableGridItem> }/>// onReorder may return a promise : a rejection restores the previous orderProps Reference
| Prop | Type | Description |
|---|---|---|
items / defaultItems | Array | Controlled / uncontrolled items (each needs a stable id) |
onReorder | function | (items, { from, to, item }) => void | Promise — a rejected promise reverts the order (uncontrolled) |
renderItem | function | (item, index) => SortableGridItem element |
handle | boolean | Show an overlay drag handle (default false : whole items draggable) |
getItemId | function | Custom accessor for item identity (defaults to item.id) |
disabled | boolean | Disable dragging for all items |
cols / gap / ... | Grid props | Every other prop is forwarded to Grid (responsive cols, gaps, alignment, ...) |