# react-grid-layout/react-grid-layout **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/react-grid-layout-react-grid-layout).** 22,073 stars · 2,702 forks · TypeScript · mit ## Links - GitHub: https://github.com/react-grid-layout/react-grid-layout - Homepage: https://react-grid-layout.github.io/react-grid-layout/examples/00-showcase.html - awesome-repositories: https://awesome-repositories.com/repository/react-grid-layout-react-grid-layout.md ## Topics `drag-and-drop` `es2015` `grid` `javascript` `react` `resize` ## Description React Grid Layout is a toolkit for building draggable, resizable, and responsive dashboard interfaces. It functions as a coordinate-based grid system that reconciles component positions and dimensions through declarative metadata, allowing developers to manage complex collections of UI elements that users can interact with directly. The library distinguishes itself through an automated packing algorithm that maintains structural integrity by shifting elements to fill gaps and resolving overlaps. It supports responsive design by monitoring container width changes against pre-defined breakpoints, ensuring that layouts remain consistent across different screen sizes. Users can manipulate the interface through drag-and-drop interactions, while developers retain control via granular constraints on movement, resizing, and aspect ratios. Beyond basic positioning, the system provides tools for dynamic widget management, including the ability to add or remove items at runtime and support for external item insertion. It includes features for layout validation, state serialization for persistence across sessions, and visual overlays to assist in identifying grid boundaries. The library is designed to be integrated into projects as a component-based layout engine. ## Tags ### User Interface & Experience - [Dashboard Widget Frameworks](https://awesome-repositories.com/f/user-interface-experience/dashboard-widget-frameworks.md) — Provides a system for arranging interactive components within a grid that supports dynamic resizing and layout persistence. - [Grid Layout Engines](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines.md) — Implements a coordinate-based grid engine for arranging and managing interactive dashboard widgets. - [Interactive Dashboards](https://awesome-repositories.com/f/user-interface-experience/interactive-dashboards.md) — Provides a framework for building customizable, interactive web dashboards with draggable and resizable widgets. - [Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/grid-layouts.md) — Provides a coordinate-based system for building interactive, draggable, and resizable dashboard interfaces. ([source](https://cdn.jsdelivr.net/gh/react-grid-layout/react-grid-layout@master/README.md)) - [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Provides a responsive grid system that adapts component positions and dimensions across defined viewport breakpoints. - [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides interactive drag-and-drop capabilities for moving and resizing elements within a container. - [Grid Systems](https://awesome-repositories.com/f/user-interface-experience/grid-systems.md) — Maps UI components to a fixed integer grid to simplify spatial calculations and collision detection. - [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Monitors container width changes to trigger layout adjustments based on pre-defined responsive breakpoints. - [Dashboard Layout Engines](https://awesome-repositories.com/f/user-interface-experience/dashboard-layout-engines.md) — Provides automated compaction algorithms to fill gaps and maintain dense, organized dashboard arrangements. ([source](https://cdn.jsdelivr.net/gh/react-grid-layout/react-grid-layout@master/README.md)) - [Dynamic Layout Engines](https://awesome-repositories.com/f/user-interface-experience/dynamic-layout-engines.md) — Manages complex collections of UI components that can be added, removed, or repositioned programmatically. - [Interface Customizers](https://awesome-repositories.com/f/user-interface-experience/interface-customizers.md) — Allows end-users to modify their workspace by moving and scaling interface elements. - [Widget Generators](https://awesome-repositories.com/f/user-interface-experience/dashboard-widget-frameworks/widget-generators.md) — Supports adding or removing grid items dynamically to facilitate interactive dashboard customization. ([source](https://react-grid-layout.github.io/react-grid-layout/examples/11-toolbox.html)) - [Declarative Layout Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-layout-frameworks.md) — Defines component positions and dimensions using declarative metadata for grid reconciliation. - [Resizable Panes](https://awesome-repositories.com/f/user-interface-experience/resizable-panes.md) — Enables users to interactively adjust the dimensions of grid items by dragging their edges. ([source](https://react-grid-layout.github.io/react-grid-layout/00-showcase.html)) - [Element Resizers](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers.md) — Provides interactive handles on edges and corners to allow users to adjust component dimensions. ([source](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)) - [State Reconciliation Strategies](https://awesome-repositories.com/f/user-interface-experience/state-reconciliation-strategies.md) — Updates the internal grid model and triggers re-renders in response to user interactions. - [Aspect Ratio Constraints](https://awesome-repositories.com/f/user-interface-experience/constraint-layout-engines/aspect-ratio-constraints.md) — Enforces specific width-to-height ratios on grid items to maintain content proportions during interactive resizing. ([source](https://react-grid-layout.github.io/react-grid-layout/examples/20-aspect-ratio.html)) - [Event-Driven Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/general-interaction-frameworks/interaction-models/event-driven-interaction-handlers.md) — Translates pointer inputs into grid-aligned movement and resizing commands. - [External Insertion Handlers](https://awesome-repositories.com/f/user-interface-experience/grid-layout-engines/external-insertion-handlers.md) — Allows dragging elements from outside the grid to dynamically add new components. ([source](https://react-grid-layout.github.io/react-grid-layout/examples/12-drag-from-outside.html)) - [Element Locks](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-elements/interaction-controllers/interaction-locks/element-locks.md) — Allows developers to lock specific widgets in place to prevent user-initiated movement or resizing. ([source](https://react-grid-layout.github.io/react-grid-layout/examples/00-showcase.html)) - [Layout & Positioning](https://awesome-repositories.com/f/user-interface-experience/layout-positioning.md) — Allows developers to configure initial positions and dimensions via component-level metadata. ([source](https://react-grid-layout.github.io/react-grid-layout/examples/04-grid-property.html)) - [Dimension Constraints](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/dimension-constraints.md) — Limits the resizing range of grid items by defining minimum and maximum width and height values. ([source](https://react-grid-layout.github.io/react-grid-layout/examples/09-min-max-wh.html)) ### DevOps & Infrastructure - [Grid Packing Algorithms](https://awesome-repositories.com/f/devops-infrastructure/scheduling/bin-packing-schedulers/grid-packing-algorithms.md) — Automatically shifts and packs grid elements to maintain structural integrity and fill gaps. ### Data & Databases - [Layout Persisters](https://awesome-repositories.com/f/data-databases/state-persistence/layout-persisters.md) — Supports serializing grid configurations to local storage to maintain dashboard layouts across browser sessions. ([source](https://react-grid-layout.github.io/react-grid-layout/08-localstorage-responsive.html))