Pixel-perfect drag, resize from any direction, collision detection. Framework-agnostic. 10KB.
Drag, resize, and reorder — all at 60fps.
Replace 3 packages with one.
declare var Masonry: anyimport { GridKit } from 'gridkit-layout'
GridKit.create('#el', {
collision: true,
animate: true
})Every feature runs live below — no static screenshots.
Pixel-level precision. Smooth 60fps pointer tracking.
All edges and corners. Min/max constraints enforced.
Overlapping widgets auto-push. O(n log n) sweep-line.
Auto-switch layouts by container width. Like CSS but smarter.
Drop widgets from a sidebar or toolbox into the grid.
Full history stack. Ctrl+Z friendly. 50-state memory.
Tab to focus, arrows to move, Shift+arrows to resize.
Grids inside grids. Isolated events. Cross-grid drag.
Compute layouts server-side. Zero DOM. Pure functions.
Core works everywhere. React & Vue hooks included.
Tree-shakeable. Import only what you use.
Pure TypeScript. No jQuery, no runtime bloat.
Three lines to a working layout.
import { GridKit } from 'gridkit-layout'
const grid = GridKit.create('#dashboard', {
collision: true,
animate: true,
onChange: (items) => saveLayout(items)
})
grid.add({ id: '1', x: 0, y: 0, w: 400, h: 200 })
grid.add({ id: '2', x: 410, y: 0, w: 200, h: 200 })Framework-agnostic core. First-class TypeScript.