Draggable Grid

Pannable grid with smooth drag and momentum

draggable-grid-tw

Customize

Item Count

Columns

Scale

0.6

Gap (vw)

6.0

Edge Resistance

0.9

Intro Duration

0.5

Wheel Smoothing

1.00

Enable DragEnable Wheel

Props

Name	Type	Default	Description
`items`	GridItem[]	`[]`	Array of items to display in the grid. Each item has id, image, dataId, and alt.
`columns`	number	`10`	Number of columns in the grid layout.
`enableDrag`	boolean	`true`	Enable drag functionality to move the grid around.
`enableWheel`	boolean	`true`	Enable mouse wheel scrolling to navigate the grid.
`edgeResistance`	number	`0.9`	Edge resistance when dragging (0-1). Higher values provide more resistance.
`introDuration`	number	`1.2`	Duration of the intro animation in seconds.
`onItemClick`	(item: GridItem, index: number) => void	`undefined`	Callback function when an item is clicked.
`className`	string	`""`	Additional CSS classes for the main container.
`gridClassName`	string	`""`	Additional CSS classes for the grid container.
`itemClassName`	string	`""`	Additional CSS classes for individual grid items.
`boundsPadding`	{ x: number; y: number }	`{ x: 200, y: 100 }`	Padding in pixels for drag bounds.
`containerMode`	"fixed" \| "absolute"	`"absolute"`	Container positioning mode. 'fixed' for full viewport overlay, 'absolute' for contained layout.
`scale`	number	`1`	Scale factor for the entire grid. 0.5 = half size, 2 = double size.
`gap`	number	`5`	Gap between items in viewport width units (vw).
`wheelSmoothing`	number	`0.3`	Wheel scroll smoothing duration in seconds (0.1-1.0). Higher values create smoother, slower scrolling.

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.

Default10

enableDragboolean

Enable drag functionality to move the grid around.

Defaulttrue

enableWheelboolean

Enable mouse wheel scrolling to navigate the grid.

Defaulttrue

edgeResistancenumber

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

Default0.9

introDurationnumber

Duration of the intro animation in seconds.

Default1.2

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

Callback function when an item is clicked.

Defaultundefined

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.

Default1

gapnumber

Gap between items in viewport width units (vw).

Default5

wheelSmoothingnumber

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

Default0.3

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