React-Grid-Layout: Draggable and resizable grid layout
Responsive React grid system with drag-and-drop resizing.
Learn more about React Grid Layout
React-Grid-Layout is a React component library that provides draggable and resizable grid layouts with responsive breakpoint support. It implements a coordinate-based positioning system where child elements are placed using grid units, with the library handling collision detection, compaction algorithms, and boundary constraints during drag-and-drop interactions. The component uses CSS transforms for performant repositioning and renders items as absolutely positioned elements within a container that dynamically adjusts its height based on grid content. It supports both controlled and uncontrolled component patterns, allowing layouts to be either fully managed by parent component state or handled internally with callback notifications. The library includes responsive capabilities through breakpoint definitions that reconfigure column counts and layouts based on container width.
Responsive breakpoint system
Supports multiple layout configurations for different screen sizes with breakpoints that can be user-defined or automatically generated. Layouts persist independently per breakpoint, allowing different arrangements for mobile, tablet, and desktop viewports.
React-only implementation
Built as a pure React component without jQuery or other external dependencies. This reduces bundle size and integrates directly with React's component lifecycle and state management patterns.
Flexible layout control
Offers multiple configuration options including static elements, collision prevention, vertical compacting modes, and bounded layouts. Supports dynamic addition and removal of grid items with automatic layout recalculation.
import GridLayout from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
function Dashboard() {
const layout = [
{ i: 'chart', x: 0, y: 0, w: 2, h: 2 },
{ i: 'stats', x: 2, y: 0, w: 1, h: 2 },
{ i: 'table', x: 0, y: 2, w: 3, h: 3 }
];
return (
<GridLayout layout={layout} cols={3} rowHeight={100} width={1200}>
<div key="chart">Chart Widget</div>
<div key="stats">Stats Widget</div>
<div key="table">Data Table</div>
</GridLayout>
);
}Fixes infinite loop when dragging external items in controlled state
- –prevent infinite loop when dragging external items in controlled state
Refactors compactor usage and fixes drag positioning issues
- –use compactor.compact() everywhere, remove compat layers
- –add defensive guards for drag-from-outside edge cases
- –remove calcDragPosition from default strategies to fix drag position jump
Do not use this release; contains a critical layout bug. Use 2.2.1 or later.
- –prevent infinite loop when dragging from outside then leaving
- –use dropConfig.onDragOver when provided
- –use custom compactor.compact() method when provided
- –enable PositionStrategy and DragConfig.threshold extension points
Top in Frontend
Related Repositories
Discover similar tools and frameworks used by developers
Bootstrap
Sass-based component library with responsive grid system.
Zustand
Immutable store-based React state management without boilerplate.
Excalidraw
React canvas library with encrypted collaborative drawing.
shadcn/ui
Copy-paste React components built on Radix and Tailwind.
Angular Components
Material Design components and utilities for Angular applications.