A Comprehensive Guide to React Grid Layout: Usage, Breakpoint & Grid Implementations, Drag‑and‑Drop and Resize Features

React Grid Layout (RGL) is a React component library that enables developers to create draggable, resizable, and responsive grid layouts for dashboards and custom page builders. The library offers a simple API for defining layout items, handling breakpoints, and integrating drag‑and‑drop and resize interactions.

Installation and Basic Usage

Install the package via npm and import the GridLayout component:

npm install react-grid-layout

import GridLayout from "react-grid-layout";

Define an initial layout array with item keys, positions, sizes, and optional static flags, then render the grid:

// layout property
const layout = [
  {i: "a", x: 0, y: 0, w: 1, h: 3, 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 (
Component A
Component B
Component C
);

Responsive Breakpoint Layout

Breakpoints allow the grid to adapt to different screen widths. Define breakpoints and column counts, then supply a layout for each breakpoint:

const breakpoints = {lg: 1200, md: 996, sm: 768, xs: 480};
const cols = {lg: 12, md: 10, sm: 6, xs: 4};
const layouts = {
  lg: [{i: 'a', x: 0, y: 0, w: 6, h: 3}, {i: 'b', x: 6, y: 0, w: 6, h: 3}],
  md: [{i: 'a', x: 0, y: 0, w: 5, h: 3}, {i: 'b', x: 5, y: 0, w: 5, h: 3}],
  sm: [{i: 'a', x: 0, y: 0, w: 6, h: 3}, {i: 'b', x: 0, y: 3, w: 6, h: 3}],
  xs: [{i: 'a', x: 0, y: 0, w: 4, h: 3}, {i: 'b', x: 0, y: 3, w: 4, h: 3}]
};

return (
Component A
Component B
);

The implementation relies on resize-observer-polyfill to monitor container width changes and recompute the active breakpoint.

Grid Position Calculation

The core function calcGridItemPosition converts grid coordinates (x, y, w, h) into pixel values for top, left, width, and height, handling both static layout and live dragging/resizing states.

export function calcGridItemPosition(...){
  // compute width/height based on grid units or resizing state
  // compute top/left based on dragging state or grid units
  return out;
}

Supporting helpers include calcGridColWidth (calculates column width from container width, margins, and column count) and calcGridItemWHPx (converts grid units to pixel dimensions, accounting for margins).

Component Rendering and Style Merging

Each child is cloned with additional class names (using clsx ) and inline styles generated by createStyle . The cloned element receives drag and resize mixins when enabled.

let newChild = React.cloneElement(child, {
  ref: this.elementRef,
  className: clsx(
    "react-grid-item",
    child.props.className,
    this.props.className,
    {
      static: this.props.static,
      resizing: Boolean(this.state.resizing),
      "react-draggable": isDraggable,
      "react-draggable-dragging": Boolean(this.state.dragging),
      dropping: Boolean(droppingPosition),
      cssTransforms: useCSSTransforms
    }
  ),
  style: { ...this.props.style, ...child.props.style, ...this.createStyle(pos) }
});
newChild = this.mixinResizable(newChild, pos, isResizable);
newChild = this.mixinDraggable(newChild, isDraggable);

Drag‑and‑Drop Implementation

Drag handling uses react-draggable . The DraggableCore component receives callbacks onStart , onDrag , and onStop . The start handler computes the initial offset using offsetParent and getBoundingClientRect , storing it in state.

onDragStart = (e, {node}) => {
  const { offsetParent } = node;
  if (!offsetParent) return;
  const parentRect = offsetParent.getBoundingClientRect();
  const clientRect = node.getBoundingClientRect();
  const cLeft = clientRect.left / transformScale;
  const pLeft = parentRect.left / transformScale;
  const cTop = clientRect.top / transformScale;
  const pTop = parentRect.top / transformScale;
  const newPosition = {
    left: cLeft - pLeft + offsetParent.scrollLeft,
    top: cTop - pTop + offsetParent.scrollTop
  };
  this.setState({ dragging: newPosition });
  // calculate grid x,y and invoke user callback
};

During dragging, the component clamps the element within the container using a utility clamp function.

Resize Implementation

Resizing is powered by react-resizable . Minimum and maximum constraints are derived from the grid's column width and the element's defined minW , maxW , minH , maxH . The onResizeHandler updates state and calls user callbacks.

onResizeHandler() {
  const { cols, x, y, i, maxH, minH } = this.props;
  let { minW, maxW } = this.props;
  let { w, h } = calcWH(this.getPositionParams(), size.width, size.height, x, y);
  minW = Math.max(minW, 1);
  maxW = Math.min(maxW, cols - x);
  w = clamp(w, minW, maxW);
  h = clamp(h, minH, maxH);
  this.setState({ resizing: handlerName === "onResizeStop" ? null : size });
  handler.call(this, i, w, h, { e, node, size });
}

Conclusion

The article walks through the inner workings of React Grid Layout, covering installation, responsive breakpoints, grid calculations, component cloning, drag‑and‑drop, and resize mechanics. Understanding these details helps developers customize RGL for complex dashboards, implement snapping, animation, or other advanced interactions.