react-grid-layout — Draggable Resizable Grid Layout for React

Introduction

react-grid-layout provides a grid layout system for React that supports dragging, resizing, and responsive breakpoints. Unlike jQuery-based alternatives, it is built entirely on React and works seamlessly with server-side rendering.

What react-grid-layout Does

• Provides draggable and resizable grid items with collision detection
• Supports responsive layouts with configurable breakpoints
• Enables static (non-movable) grid items alongside draggable ones
• Allows serialization and restoration of layout state
• Handles both controlled and uncontrolled component patterns

Architecture Overview

The library wraps each child in a draggable and resizable container using react-draggable and react-resizable. Layouts are defined as arrays of position objects specifying x, y, width, and height in grid units. The ResponsiveGridLayout wrapper automatically selects the correct layout based on container width and defined breakpoints.

Self-Hosting & Configuration

• Install via npm or yarn as a project dependency
• Import the base CSS files for proper drag handle and resize styling
• Configure grid properties: cols, rowHeight, width, and breakpoints
• Use the onLayoutChange callback to persist layout state
• Set compactType to control vertical or horizontal compaction behavior

Key Features

• Pure React implementation with no jQuery dependency
• Built-in responsive breakpoint support via ResponsiveGridLayout
• Customizable drag handles and resize handles
• Optional bounds checking to prevent items from leaving the grid
• Server-side rendering compatible with no window dependency on initial render

Comparison with Similar Tools

• Gridstack.js — jQuery-dependent grid; react-grid-layout is React-native
• Packery — Masonry-style packing; react-grid-layout uses a strict grid model
• react-mosaic — Window manager pattern; react-grid-layout focuses on dashboard grids
• Muuri — Supports filtering and sorting; react-grid-layout prioritizes drag-resize simplicity
• CSS Grid — Native but lacks built-in drag-and-drop and resize behavior

FAQ

Q: Can I use it with Next.js SSR? A: Yes. The library does not depend on window at import time. Use dynamic import with ssr:false if you encounter hydration issues.

Q: How do I make certain items non-draggable? A: Set static: true in the layout item object to lock its position and size.

Q: Does it support touch devices? A: Yes. react-draggable and react-resizable both handle touch events.

Q: How do I persist layouts across sessions? A: Use the onLayoutChange callback to serialize the layout array to localStorage or a backend.

Sources

• https://github.com/react-grid-layout/react-grid-layout
• https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html