Gridstack.js

Gridstack.js 是一个用 TypeScript 写的网格布局库，解决的是「让页面上的卡片能拖、能拉大缩小、还能按屏幕宽度自动重排」这件事。做后台仪表盘、可自定义首页、看板类界面时，自己写拖拽和碰撞检测很费劲，它把这些封装成了几行初始化代码。

它不依赖其他库，也不绑定框架，原生 Angular 支持随包提供，React、Vue、Ember、Knockout.js 等有外部绑定。页面上的示例可以直接拖动方块试手感，基础示例展示了从 npm install gridstack 到 GridStack.init() 加载几个 widget 的完整流程。

主要功能

• 拖拽与缩放：元素可自由移动、调整大小，支持从侧边栏拖入新卡片、拖到垃圾桶删除。
• 响应式列布局：按列组织，随屏幕宽度变化重排，移动端可用。
• 布局保存与恢复：把当前排布存下来，之后还原到之前的状态。
• 跨网格与嵌套：卡片能在多个网格之间拖动，网格可以嵌套到任意深度。

适合谁

需要快速搭出可编辑仪表盘的前端开发者，尤其是已经在用 Angular、React 或 Vue 的项目。文档、API 手册和示例都挂在 GitHub 与官网上，遇到问题可以去 Slack 社区或 GitHub issues 提问。

费用与限制

开源软件，官网接受 PayPal、Venmo 捐赠来支持维护，主维护者是 Alain Dumesny。当前版本 v10.3.1。界面和文档为英文，接入前需要熟悉前端构建工具和至少一个框架的基本用法。