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 drag positioning bug when grid items are bounded to their parent container.
- –Update if you use `isBounded={true}` and experienced incorrect drag positions for grid items.
- –Release notes do not specify breaking changes or new requirements.
Patch release fixing a cursor desync bug when using GridItem with React 18 and repairing CI build workflows.
- –Update to resolve cursor position desynchronization issues affecting GridItem drag interactions in React 18 environments.
- –Release notes do not specify breaking changes, migration steps, or minimum version requirements.
Fixes breakpoint/layout event ordering and a calcXY positioning bug; no breaking changes noted.
- –Update code relying on breakpoint or layout event timing, as firing order has changed.
- –Verify grid item positioning if you experienced calcXY calculation issues in prior versions.
Related Repositories
Discover similar tools and frameworks used by developers
react-beautiful-dnd
Accessible React library for list drag-and-drop interactions.
query
Declarative server-state caching with automatic background synchronization.
react
Component-based library using virtual DOM for efficient UI rendering.
imgui
Immediate mode GUI library for 3D applications.
next.js
File-based React framework with hybrid rendering strategies.