Draggable Grid

A grid you can drag around with smooth 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.

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.