Draggable Grid

Pannable grid with smooth drag and momentum

draggable-grid-tw
Dog 1
Dog 3
Dog 2
Dog 5
Dog 1
Dog 2
Dog 4
Dog 7
Dog 1
Dog 2
Dog 3
Dog 6
Dog 4
Dog 7
Dog 1
Dog 3
Dog 1
Dog 7
Dog 1
Dog 2
Dog 3
Dog 3
Dog 5
Dog 4
Dog 1
Dog 7
Dog 5
Dog 1
Dog 1
Dog 2
Dog 2
Dog 3
Dog 4
Dog 4
Dog 1
Dog 2
Dog 7
Dog 2
Dog 5
Dog 3
Dog 6
Dog 7
Dog 3
Dog 7
Dog 5
Dog 5
Dog 4
Dog 7
Dog 3
Dog 3
Dog 3
Dog 3
Dog 5
Dog 4
Dog 3
Dog 3
Dog 1
Dog 4
Dog 5
Dog 5

Customize

Layout

60
10
0.6
6

Animation

0.9
0.5
1

Interaction

Props

itemsGridItem[]

Array of items to display in the grid. Each item has id, image, dataId, and alt.

Default:[]
columnsnumber

Number of columns in the grid layout.

Default:10
enableDragboolean

Enable drag functionality to move the grid around.

Default:true
enableWheelboolean

Enable mouse wheel scrolling to navigate the grid.

Default:true
edgeResistancenumber

Edge resistance when dragging (0-1). Higher values provide more resistance.

Default:0.9
introDurationnumber

Duration of the intro animation in seconds.

Default:1.2
onItemClick(item: GridItem, index: number) => void

Callback function when an item is clicked.

Default:undefined
classNamestring

Additional CSS classes for the main container.

Default:""
gridClassNamestring

Additional CSS classes for the grid container.

Default:""
itemClassNamestring

Additional CSS classes for individual grid items.

Default:""
boundsPadding{ x: number; y: number }

Padding in pixels for drag bounds.

Default:{ x: 200, y: 100 }
containerMode"fixed" | "absolute"

Container positioning mode. 'fixed' for full viewport overlay, 'absolute' for contained layout.

Default:"absolute"
scalenumber

Scale factor for the entire grid. 0.5 = half size, 2 = double size.

Default:1
gapnumber

Gap between items in viewport width units (vw).

Default:5
wheelSmoothingnumber

Wheel scroll smoothing duration in seconds (0.1-1.0). Higher values create smoother, slower scrolling.

Default:0.3

Demo images from thiings.co, not part of the React Bits Pro offer.