react-grid-layout

ui-component grid layout

React-grid-layout is a draggable and resizable grid layout library for React. It supports responsive breakpoints to adapt content appropriately across different screen sizes.

Latest Ver 1.5.1

Homepage

Github

21,161

📢 React-grid-layout offers a responsive grid layout that users can drag and resize.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/react-grid-layout.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/css/styles.css

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/css/styles.min.css

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/react-grid-layout.min.js.map

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

⚙️ JavaScript
{\"code\": \"import GridLayout from 'react-grid-layout';\nconst MyFirstGrid = () => {\n return (\n <GridLayout className='layout' cols={12} rowHeight={30} width={1200}>\n <div key='1'>Block 1</div>\n <div key='2'>Block 2</div>\n <div key='3'>Block 3</div>\n <div key='4'>Block 4</div>\n </GridLayout>\n );\n};\"}