A draggable and resizable grid layout with responsive breakpoints, for React.



travis build CDNJS npm package npm downloads

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

RGL is React-only and does not require jQuery.


GIF from production usage on BitMEX.com

[Demo | Changelog | CodeSandbox Editable demo]

Table of Contents


  1. Showcase
  2. Basic
  3. No Dragging/Resizing (Layout Only)
  4. Messy Layout Autocorrect
  5. Layout Defined on Children
  6. Static Elements
  7. Adding/Removing Elements
  8. Saving Layout to LocalStorage
  9. Saving a Responsive Layout to LocalStorage
  10. Minimum and Maximum Width/Height
  11. Dynamic Minimum and Maximum Width/Height
  12. No Vertical Compacting (Free Movement)
  13. Prevent Collision
  14. Error Case
  15. Toolbox
  16. Drag From Outside
  17. Bounded Layout
  18. Resizable Handles
  19. Scaled Containers

Projects Using React-Grid-Layout

Know of others? Create a PR to let me know!


  • 100% React - no jQuery
  • Compatible with server-rendered apps
  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Configurable packing: horizontal, vertical, or off
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Responsive breakpoints
  • Separate layouts per responsive breakpoint
  • Grid Items placed using CSS Transforms
    • Performance with CSS Transforms: on / off, note paint (green) as % of time
  • Compatibility with
Version Compatibility
>= 0.17.0 React 16 & 17
>= 0.11.3 React 0.14 & 15
>= 0.10.0 React 0.14
0.8. - 0.9.2 React 0.13
< 0.8 React 0.12


Install the React-Grid-Layout package package using npm:

npm install react-grid-layout

Include the following stylesheets in your application:



Use ReactGridLayout like any other component. The following example below will produce a grid with three items where:

  • users will not be able to drag or resize item a
  • item b will be restricted to a minimum width of 2 grid blocks and a maximum width of 4 grid blocks
  • users will be able to freely drag and resize item c
import GridLayout from 'react-grid-layout';

class MyFirstGrid extends React.Component {
  render() {
    // layout is an array of objects, see the demo for more complete usage
    const layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    return (
      <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
        <div key="a">a</div>
        <div key="b">b</div>
        <div key="c">c</div>

You may also choose to set layout properties directly on the children:

import GridLayout from 'react-grid-layout';

class MyFirstGrid extends React.Component {
  render() {
    return (
      <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>

Usage without Browserify/Webpack

A module usable in a

  • Cannot find module 'react/lib/emptyFunction' when using react 0.14.0

    Cannot find module 'react/lib/emptyFunction' when using react 0.14.0

    When I attempt to use this package with react 0.14.0 I get the following error on compile:

    Error: Cannot find module 'react/lib/emptyFunction' from '<redacted>/node_modules/react-grid-layout/node_modules/react-resizable/node_modules/react-draggable/lib'
    opened by tom-james-watson 37
  • Tracking `next` release

    Tracking `next` release

    As many have you been awaiting, the next branch:

    • Contains a refactor of most of the project
    • Has React 0.14 Support
    • Has better IE/Touch compatibility
    • Is fully validated using Flow
    • Uses mainline React-Draggable and React-Resizable (1.x versions).

    Much of the difficulty in this branch involves a rethinking of how we manage state in child components and a move toward a completely stateless <Draggable>, which is not yet integrated in RGL.

    This issue is tracking the release of this branch. See also discussion in #117.


    • [x] React-Draggable 1.x is calling back with clientX/Y when it should be sending offsetX/Y. This is causing a bad 300px offset in the demo. (fixed in https://github.com/mzabriskie/react-draggable/commit/c1a5bb3daaebfef07512fabf9dfbd435279241c8)
    • [x] Draggable is not following mouse position with placeholder in the grid, it is instead following the placeholder directly. For example:
      • (Correct, old branch) screen shot 2015-11-23 at 4 40 34 pm
      • (Incorrect, next branch) screen shot 2015-11-23 at 4 40 55 pm
    • [x] Use <DraggableCore> directly and store state in RGL, rather than in each <Draggable>.

    Stretch goals:

    • [ ] Once onto <DraggableCore>, we can use percentage top/left and height/width directly. This will not only allow us to stop listening for resize events, but do more proper server-side rendering.
      • Can we still use CSS transforms with percentages? CSS transform percentages are relative to the element's width/height, not the offsetParent's width/height. We could trick it by measuring the offsetParent and doing the math with JS, but we lose the server-rendering benefits as above.
    opened by STRML 33
  • Update layout when props changed

    Update layout when props changed

    How to update layout programmatically? Currently, when i try to set new layout to GridLayout it will be ignored This is new props that i provided image This is yours component state after i provided new layout image

    As you can see, props are just ignored, all i need to do is to change children isDraggable on button click I tried to do the same with inline grid, but it had no effect

    opened by ghost 29
  • Child component does not properly inherit GridItem props

    Child component does not properly inherit GridItem props

    Hi, I am rather new to React as a whole, so if this issue is off-base or needs clarification please don't hesitate.

    I am seeing an issue where I define a child component and try to instantiate it through the standard React constructor as seen below. "tile_info" is an object retrieved from a server which you can assume contains attributes seen in TilePanel

        <TilePanel tile={this.props.tile_info} grid={this.generateGrid()}
    var TilePanel = React.createClass({
      render: function () {
        return (
            <div key={this.props.tile.title} class="widget-number" data-grid ={this.props.grid} >
              <h1 className="title">{this.props.tile.title}</h1>
              <h2 className="value">{this.props.tile.value}</h2>
              <p style={styles.last_updated}>{this.props.tile.last_update}</p>

    The resulting HTML for that GridItem does not contain the expected class/style attributes.

    <div class="react-grid-item widget-number     cssTransforms react-resizable" style="width: 270px; height: 310px; position: absolute; touch-action: none; transform: translate(10px, 10px);">


    <div class="widget-number" style="background-color:#ff9618;" data-reactid=".$/=1$daily_revenue">

    Notice the lack of props on the class and style attributes.

    If this isn't clear, I will do my best to clarify

    opened by nitronick600 26
  • Resizable handles on other corners

    Resizable handles on other corners

    Thanks for submitting an issue to RGL!

    Please mark the type of this issue:

    • [ ] Bug
    • [x] Feature Request
    • [ ] Question

    If you have a question or bug report, please use the WebpackBin Template to demonstrate. It is much easier for us to help you if you do. image

    opened by zhangzhike 22
  • Custom Component

    Custom Component

    Hello, how do I use a custom component as grid item? I couldn't find anything on the guide and I'm quite new in the react world. Thank you in advance.

    opened by woland7 21
  • RGL v2 Megathread

    RGL v2 Megathread


    Thanks so much for your use of React-Grid-Layout and a special thank you to all of you who have opened pull requests.

    I haven't been able to spend as much time on this repo as I had hoped, as it fulfills our rather humble layout needs at BitMEX quite well. Yet I understand that some of you have more specific needs and I would like to address those.

    There are a large number of open issues that generally follow the same pattern:

    • Confusion about input options or callbacks, especially layout vs. data-grid/_grid,
    • Confusion about mutation of internal layouts
    • Issues when using custom components as grid children
    • Lack of extension points

    I would like to address these issues with a minor rewrite in RGL v2 (yeah - skipping v1, we've been in 0.x for two years).

    React-Grid-Layout v2

    RGL v2 has the following list of design goals:

    Major Changes:

    The primary goal of RGL v2 is to expose a set of simple, overridable components to make custom behavior easier to implement. I'd like to allow creation of new compactors, or even new layout mechanisms (top/left vs transform, or even global CSS munging).

    • [ ] Pluggable implementations:
      • Compactor
      • DOM layout ((l: LayoutItem, props) => props)
      • CSS transition support (#571)
      • Any others?
      • Could this even be per-item?
    • [ ] One, and only one way of defining a grid: via input to an exposed <GridItem> component.
      • A <GridItem> takes a layout property with the normal ({w: number, h: number...}) shape.
      • A <GridItem> always renders a <div> child so we can be assured that styles are settable no matter the item's children.
      • This component's implementation should be overridable (by extending the class) with a well-defined API.
      • This should serve as the primary extension point for implementing custom behavior.
      • This may serve as a way to pass items from one grid to another - while React will internally reset the state of the component, which could be problematic, it should be relatively easy to simply build <GridItem>s by spec and transfer them from one grid to another in the parent's render().

    Minor Changes:

    • Expose utils and other internal functions. Allow a new implementation to be passed into the layout. This could look something like:
    import {utils} from 'react-grid-layout'
    // ...
    utils.somethingToOverride = function()...
    <ReactGridLayout __utils={utils} ...

    Thoughts on this? Are other libraries doing something like this for custom behavior?

    • Pass pre- and post- compaction data in callbacks - see #345 - or should we allow hooking into the compactor somehow?
    • Docs: Define grid lifecycle clearly and customization points


    For those of you who use RGL in production or any other projects, what do you see in other grid libraries? What would you like to see inside RGL? We can't provide the same featureset as some jQuery grids, for example, due to React's ownership model, but we can provide a library that's easy to use an extensible.

    If anyone is excited by this idea, please ping me below! I could really use help making this happen as my day job takes up all of my time.

    enhancement help wanted stale core 
    opened by STRML 21
  • Auto-Height (or similar) Layout Items

    Auto-Height (or similar) Layout Items

    Hi, first of all i want to do congratulations for this library because it is really fantastic! I just wanted to know if anyone had found a way to make the Layout Item dynamic in terms of height, based on the content that is in it

    Thank you so much, Matteo

    question stale 
    opened by mperu92 20
  • Looking for Maintainers

    Looking for Maintainers


    As is likely obvious at this point, I don't have the time to keep up with the large influx of issues on this repository. RGL works great for our use case at BitMEX but is clearly not as customizable as the community wants it to be.

    My intention is for RGL to define proper extension points so that a vibrant plugin system may emerge, reducing the burden on this repository to implement custom functionality, such as compactors. For those reasons, I've prepared #346 which defines this in detail.

    Are there any volunteers to help get the work started? I would be happy to review PRs but I simply don't have the time to spearhead this.

    help wanted 
    opened by STRML 20
  • Grid item class name not changing

    Grid item class name not changing

    I'm running into an issue dynamically updating the classname of a grid item.

    I have a button that adds an item to the grid when clicked. When the item is created, I add extra props such as boolean for if it's a new item, a class name to specify that it is true for styling, and a boolean setting edit mode to true. When the item is confirmed, a button click there is meant to update the item setting the booleans to false and changing the class name. The class name on the element stays the same, though. I'm assuming this is because on updates only layout information is cared about.

    Is there any way I can make this work?

    opened by jomasti 20
  • How should the parent pass in new layout(s)?

    How should the parent pass in new layout(s)?

    Related to #98

    This is an open issue for comment.

    Currently, the following methods are used to determine whether or not to reload the layout:


    !_.isEqual(this.props.layout, nextProps.layout)


    ``!_.isEqual(this.props.layouts, nextProps.layouts)`

    This doesn't adequately cover some use issues, like:

    • (#98) - If I reset the layout, to what was originally passed in, the props haven't changed, so the layout doesn't reset.

    This is actually very similar to the problem that caused me to rewrite <Draggable> in the first place. It's difficult, in React, to enforce a state reset on children at some times while allowing them to manage their own state at other times.

    Should users just simply grab a ref and setState() themselves? I don't know if I see a better option.

    question stale 
    opened by STRML 20
  • isBounded does not apply on resizing

    isBounded does not apply on resizing

    Describe the bug

    When you resize Item in bounded Grid, you can end up outside the Grid, which will cause Item overflowing the Grid element (if the element have fixed size in px). If you then try to drag and move this Item, it will be immediately fixed and placed inside, because bounded Grid does not allow Item to be placed outside. I believe isBounded should have the same behaviour for dragging as well as for resizing, so the boundaries of bounded Grid couldn't be changed by user.

    Workaround I didn't find any way to stop user from continue resizing out of the Grid- onResize* handlers can't change or cancel the event. The only possibility is to let user overflow the Grid, then manually calculate the correct Item size when onLayoutChange and rerender the Grid with correct values.

    Your Example Website or App


    Steps to Reproduce the Bug or Issue

    1. Go to Bounded Layout demo
    2. Find Item closest to the bottom edge and resize it downwards, until you exceed the edge and change the boundaries of the Grid

    Expected behavior

    In the bounded Grid, resizing should stop on the edges and should not continue outside the Grid (or change the Grid boundaries)

    react-grid-layout library version


    Operating System Version




    Additional context

    No response

    Screenshots or Videos

    No response

    opened by BobesCZ 0
  • add lockAspectRatio ability in GridItem with react-resizable

    add lockAspectRatio ability in GridItem with react-resizable

    Describe the bug

    no lockAspectRatio ability in GridItem now.

    Your Example Website or App


    Steps to Reproduce the Bug or Issue

    no lockAspectRatio ability in GridItem now.

    Expected behavior

    GridItem can lockAspectRatio like react-resizable

    react-grid-layout library version


    Operating System Version




    Additional context

    No response

    Screenshots or Videos

    No response

    opened by Kun8018 0
  • feat: add lockAspectRatio props in GridItem Component

    feat: add lockAspectRatio props in GridItem Component

    Thanks for submitting a pull request to RGL!

    Please reference an open issue. If one has not been created, please create one along with a failing example or test case.

    Please do not commit built files (/dist) to pull requests. They are built only at release. https://github.com/react-grid-layout/react-grid-layout/issues/1778

    opened by Kun8018 0
  • `onLayoutChange` is not triggered, but `onDragStop` does.

    `onLayoutChange` is not triggered, but `onDragStop` does.

    Describe the bug

    When I activate allowOverlap and drag an item, the onDragStop gets called, but onLayoutChange does not.

    It works fine when allowOverlap is false.

    Your Example Website or App


    Steps to Reproduce the Bug or Issue

    1. Go to Allow Overlap example.
    2. Attempt to drag item
    3. Notice that the displayed [x, y, w, h] does not get updated because it is updated when onLayoutChange is triggered.

    Expected behavior

    As a developer, I expect onLayoutChange to be triggered when allowOverlap is set to true and when an item position is changed by the user by dragging it.

    react-grid-layout library version


    Operating System Version




    Additional context

    I believe this is happening from inside this function (onDragStop) where the oldLayout gets updated by mistake because it has the same reference as newLayout when moveElement is called on layout.

    Screenshots or Videos

    No response

    opened by alyyousuf7 0
  • Implement dragging in

    Implement dragging in "wrap" mode

    Continuation of #1188.

    Original description:

    Handles moving conflicting elements in a way appropriate for a sequence of elements arranged in a wrapped-paragraph style.

    enhancement documentation 
    opened by STRML 0
  • 1.3.4(Feb 21, 2022)

  • 1.3.3(Jan 24, 2022)

  • 1.3.2(Jan 24, 2022)

  • 1.3.1(Nov 29, 2021)

  • 0.13.9(Dec 8, 2016)

  • 0.13.8(Dec 8, 2016)

  • 0.13.7(Dec 8, 2016)


    • Fixed an error during layout sync if children was a keyed fragment or had nested arrays.
    • Fixed onLayoutChange being called when layout didn't change.
    • Fixed some issues with input layout items being modified in-place rather than cloned.
    • Minor typos.
    Source code(tar.gz)
    Source code(zip)
  • 0.13.6(Dec 8, 2016)

  • 0.13.5(Dec 8, 2016)

  • 0.13.4(Dec 8, 2016)


    • Fixed potential call to ReactDOM.findDOMNode(this) after unmount of WidthProvider.
    • Fixed an issue where layout items using data-grid could rearrange on mount depending on how they were ordered.
      • See #342 for reference.
    Source code(tar.gz)
    Source code(zip)
  • 0.13.3(Dec 8, 2016)

  • v0.13.2(Dec 8, 2016)


    • Diffing children in order to regenerate the layout now diffs the key props and their order.
      • This will catch more changes, such as sorting, addition, and removal.
    • Only pass className and style to WidthProvider. Other props were not intended to be supported.
      • I'm aware this could be a breaking change if you were relying on this bad behavior. If so, please use your own WidthProvider-style HOC.
    • babel-plugin-transform-flow-comments had limited support for defining types like transpiled classes.
      • This has been updated to instead copy source to .js.flow files, which preserves all type information.
    Source code(tar.gz)
    Source code(zip)
  • 0.13.1(Dec 8, 2016)

  • 0.13.0(Dec 8, 2016)


    • Due to a change in React 15.2, passing the _grid property on DOM children generates an error. To compensate, we now error on the same and suggest using data-grid instead. Simply change any use of _grid to data-grid, or add your properties to the layout.


    • Fix React 15.3 warning re: propTypes.
    Source code(tar.gz)
    Source code(zip)
  • 0.12.7(Dec 8, 2016)

  • 0.12.6(Dec 8, 2016)

  • 0.12.5(Dec 8, 2016)

  • 0.12.4(Dec 8, 2016)

    • Update to React-Draggable v2. Fixes: #241, #239, #24
      • v2 contains a number of bugfixes & enhancements for touchscreens, multitouch, and scrolling containers.
    Source code(tar.gz)
    Source code(zip)
  • 0.12.3(Dec 8, 2016)

  • 0.12.2(Dec 8, 2016)

  • 0.12.1(Dec 8, 2016)

  • 0.12.0(Dec 8, 2016)

    • <ReactGridLayout> will no longer animate so severely on mount. See #212.
      • If you are using <WidthProvider>, you may notice that the container's width still shunts on mount. If you like, you may delay mounting by setting measureBeforeMount={true} on the wrapped element. This will eliminate the mounting animation completely.
      • If you enjoyed the old animation, set useCSSTransforms={this.state.mounted} and toggle the mounting flag. See 0-showcase.jsx for an example.
    • Set more permissive version ranges for <Draggable> and <Resizable> dependencies, as they are now stable and will only introduce breaking changes on major version ticks.
    Source code(tar.gz)
    Source code(zip)
  • 0.11.3(Dec 8, 2016)

  • 0.11.2(Dec 8, 2016)

  • 0.11.1(Dec 8, 2016)

  • 0.11.0(Dec 8, 2016)

    This release contains potentially breaking changes so I have updated the minor version (as per semver).

    Breaking Changes:

    • Layout items now have a fixed set of properties. Other properties will not be merged into the <GridItem>, such as className. To set a className on a child, set it on the child directly and it will be merged. This allows us to make better assumptions about the layout and use a faster cloning mechanism.
    • Setting individual handle and cancel selectors per item is no longer supported. If you need this, please open a ticket and let me know your use case.

    Other changes:

    • Bugfix: <ResponsiveReactGridLayout> onLayoutChange callback data could still be stale.
    • Bugfix: Range error when building layout solely from _grid properties.
      • This broke a lot of usage and thus 0.10.11 and 0.10.10 have been unpublished.
    • Removed redundant isPlaceholder property from <GridItem>.
    • README updates to clarify layout/_grid usage.
    Source code(tar.gz)
    Source code(zip)
  • 0.10.11(Dec 8, 2016)

  • 0.10.10(Dec 8, 2016)

  • 0.10.9(Dec 8, 2016)

  • 0.10.8(Dec 8, 2016)

Organization for maintenance of React-Grid-Layout and associated repositories
:sparkles: A sortable and resizable pane component for React.

Sortable and resizable pane component for react. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage uncontrolled controlled Pr

bokuweb 612 Sep 28, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Work in progress react-flow-editor Overview React component to create graphic user interface with: draggable nodes with ports and edges on a directed

Microsoft 94 Sep 14, 2022
React draggable component

React-Draggable A simple component for making elements draggable. <Draggable> <div>I can now be moved around!</div> </Draggable> Demo Changelog Vers

Samuel Reed 7.9k Sep 27, 2022
React draggable component

A simple component for making elements draggable.

RGL 7.9k Sep 26, 2022
React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Streak 274 Sep 21, 2022
A simple draggable list component for React

react-drag-listview React drag list component. install Example Drag Rows Simple dragging demo Dragging Ant-Design table Dragging Ant-Design table widt

浅搁 223 Sep 22, 2022
Draggable tree for react.

react-draggable-tree Draggable tree for react. installation npm install -S @jswork/react-draggable-tree properties Name Type Required Default Descript

feizheng 1 Mar 25, 2021
Draggable, Smart menu for react

Features ⚡ Configurable and smart floating menu for react ⚙️ Comes with a lot of options to customize the behavior of the menu ?? Auto detects edges o

Prabhu Murthy 107 Sep 24, 2022
A simple component for making elements draggable

React Draggable Component A simple component for making elements draggable.

Haikel Fazzani 9 Sep 17, 2022
React drag and drop sort support flex layout and nested.

react-flex-dnd React drag and drop sort support flex layout and nested. This package using hooks, note that your React version is above 16.8 :) Why fl

lvshihao 6 Jun 29, 2022
a dragger layout system with React style .

特别声明 由于本人正在忙其他的事情,dragact 已经暂停维护了。请不要使用 dragact(出了问题我实在没精力帮您解决,实在抱歉 最后,我推荐的替换是: https://github.com/STRML/react-grid-layout https://github.com/atlassia

ZhengFang 762 Sep 15, 2022
Drag and drop page builder and CMS for React, Vue, Angular, and more

Drag and drop page builder and CMS for React, Vue, Angular, and more Use your code components and the stack of your choice. No more being pestered for

Builder.io 3.8k Oct 1, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.1k Oct 1, 2022
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Sep 22, 2022
ReactJS drag and drop functionality for mouse and touch devices

DragDropContainer and DropTarget Live demo: peterh32.github.io/react-drag-drop-container Features Very easy to implement and understand. Works on mous

Peter Hollingsworth 142 Sep 26, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.3k Oct 1, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.3k Sep 30, 2022
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 5.4k Sep 24, 2022
Drag and Drop for React

Drag and Drop for React

React DnD 18.3k Sep 28, 2022