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

> A draggable and resizable grid layout system for React with responsive breakpoints, inspired by Packery and Gridster.

## Install

Save as a script file and run:

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

## Quick Use
```bash
npm install react-grid-layout
```
```jsx
import GridLayout from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

const layout = [
  { i: "a", x: 0, y: 0, w: 1, h: 2 },
  { i: "b", x: 1, y: 0, w: 3, h: 2 },
  { i: "c", x: 4, y: 0, w: 1, h: 2 },
];

<GridLayout layout={layout} cols={12} rowHeight={30} width={1200}>
  <div key="a">A</div>
  <div key="b">B</div>
  <div key="c">C</div>
</GridLayout>
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-935ba8de
Author: Script Depot