# React-Grid-Layout [![travis build](https://travis-ci.org/STRML/react-grid-layout.svg?branch=master)](https://travis-ci.org/STRML/react-grid-layout) [![CDNJS](https://img.shields.io/cdnjs/v/react-grid-layout.svg)](https://cdnjs.com/libraries/react-grid-layout) [![npm package](https://img.shields.io/npm/v/react-grid-layout.svg?style=flat-square)](https://www.npmjs.org/package/react-grid-layout) [![npm downloads](https://img.shields.io/npm/dt/react-grid-layout.svg?maxAge=2592000)]() React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or [Gridster](http://dsmorse.github.io/gridster.js/), 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. ![BitMEX UI](http://i.imgur.com/oo1NT6c.gif) > GIF from production usage on [BitMEX.com](https://www.bitmex.com) [**[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**] ## Table of Contents - [Demos](#demos) - [Features](#features) - [Installation](#installation) - [Usage](#usage) - [Responsive Usage](#responsive-usage) - [Providing Grid Width](#providing-grid-width) - [Grid Layout Props](#grid-layout-props) - [Responsive Grid Layout Props](#responsive-grid-layout-props) - [Grid Item Props](#grid-item-props) - [User Recipes](../../wiki/Users-recipes) - [Performance](#performance) - [Contribute](#contribute) - [TODO List](#todo-list) ## Demos 1. [Showcase](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html) 1. [Basic](https://react-grid-layout.github.io/react-grid-layout/examples/1-basic.html) 1. [No Dragging/Resizing (Layout Only)](https://react-grid-layout.github.io/react-grid-layout/examples/2-no-dragging.html) 1. [Messy Layout Autocorrect](https://react-grid-layout.github.io/react-grid-layout/examples/3-messy.html) 1. [Layout Defined on Children](https://react-grid-layout.github.io/react-grid-layout/examples/4-grid-property.html) 1. [Static Elements](https://react-grid-layout.github.io/react-grid-layout/examples/5-static-elements.html) 1. [Adding/Removing Elements](https://react-grid-layout.github.io/react-grid-layout/examples/6-dynamic-add-remove.html) 1. [Saving Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/7-localstorage.html) 1. [Saving a Responsive Layout to LocalStorage](https://react-grid-layout.github.io/react-grid-layout/examples/8-localstorage-responsive.html) 1. [Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/9-min-max-wh.html) 1. [Dynamic Minimum and Maximum Width/Height](https://react-grid-layout.github.io/react-grid-layout/examples/10-dynamic-min-max-wh.html) 1. [No Vertical Compacting (Free Movement)](https://react-grid-layout.github.io/react-grid-layout/examples/11-no-vertical-compact.html) 1. [Prevent Collision](https://react-grid-layout.github.io/react-grid-layout/examples/12-prevent-collision.html) 1. [Error Case](https://react-grid-layout.github.io/react-grid-layout/examples/13-error-case.html) 1. [Toolbox](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html) 1. [Drag From Outside](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html) 1. [Bounded Layout](https://react-grid-layout.github.io/react-grid-layout/examples/16-bounded.html) 1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html) 1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html) 1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html) 1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html) 1. [Single Row Horizontal](https://react-grid-layout.github.io/react-grid-layout/examples/21-horizontal.html) #### Projects Using React-Grid-Layout - [BitMEX](https://www.bitmex.com/) - [AWS CloudFront Dashboards](https://aws.amazon.com/blogs/aws/cloudwatch-dashboards-create-use-customized-metrics-views/) - [Grafana](https://grafana.com/) - [Metabase](http://www.metabase.com/) - [HubSpot](http://www.hubspot.com) - [ComNetViz](http://www.grotto-networking.com/ComNetViz/ComNetViz.html) - [Stoplight](https://app.stoplight.io) - [Reflect](https://reflect.io) - [ez-Dashing](https://github.com/ylacaute/ez-Dashing) - [Kibana](https://www.elastic.co/products/kibana) - [Graphext](https://graphext.com/) - [Monday](https://support.monday.com/hc/en-us/articles/360002187819-What-are-the-Dashboards-) - [Quadency](https://quadency.com/) - [Hakkiri](https://www.hakkiri.io) - [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets) - [Statsout](https://statsout.com/) - [Datto RMM](https://www.datto.com/uk/products/rmm/) - [SquaredUp](https://squaredup.com/) _Know of others? Create a PR to let me know!_ ## Features - 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](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), 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 | ## Installation Install the React-Grid-Layout [package](https://www.npmjs.org/package/react-grid-layout) using [npm](https://www.npmjs.com/): ```bash npm install react-grid-layout ``` Include the following stylesheets in your application: ``` /node_modules/react-grid-layout/css/styles.css /node_modules/react-resizable/css/styles.css ``` ## Usage 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` ```js 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 (

); } } ``` You may also choose to set layout properties directly on the children: ```js import GridLayout from "react-grid-layout"; class MyFirstGrid extends React.Component { render() { return (

); } } ``` ### Usage without Browserify/Webpack A module usable in a `

	Stars	Issues	Version	Updated	Created
react-beautiful-dnd	32,440	626	13.1.1	2 years ago	7 years ago
react-grid-layout	19,465	177	1.4.4	5 months ago	9 years ago
react-grid-system	808	35	8.2.0	2 months ago	8 years ago

react-beautiful-dnd vs react-grid-layout vs react-grid-system

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past