# aurelia-gridstack

> Aurelia 2 wrappers for GridStack

Latest version **8.0.1** (published 2026-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install aurelia-gridstack
pnpm add aurelia-gridstack
yarn add aurelia-gridstack
bun add aurelia-gridstack
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 8.0.1 |
| Published | 2026-07-28 |
| First published | 2021-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 55.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 11 |
| Author | https://github.com/maximbalaganskiy |
| Maintainers | m.balaganskiy |
| Keywords | aurelia, elements, gridstack |

## Links

- npm: https://www.npmjs.com/package/aurelia-gridstack
- Repository: https://github.com/aurelia-ui-toolkits/aurelia-gridstack
- Homepage: https://aurelia-ui-toolkits.github.io/aurelia-gridstack/
- Issues: https://github.com/aurelia-ui-toolkits/aurelia-gridstack/issues
- npm.io page: https://npm.io/package/aurelia-gridstack

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.8.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 8.0.1 (latest) — 2026-07-28
- 5.0.0-au2 (au2) — 2024-02-15
- 8.0.0 — 2026-07-28
- 7.0.0 — 2025-07-18
- 6.1.0 — 2025-02-19
- 6.0.0 — 2024-12-13
- 5.0.0 — 2024-02-15
- 4.0.1-au2 — 2023-08-03
- 4.0.0-au2 — 2023-08-03
- 4.0.0 — 2023-08-01
- 3.0.1-au2 — 2023-03-14
- 3.0.1 — 2023-03-14
- 3.0.0-au2 — 2022-12-05
- 3.0.0 — 2022-12-05
- 2.0.1 — 2022-10-04
- … 9 more at https://npm.io/package/aurelia-gridstack/versions

## README

# aurelia-gridstack

Aurelia 2 wrapper for [GridStack](https://github.com/gridstack/gridstack.js).

## Installation

```sh
npm install aurelia-gridstack gridstack
```

## Configuration

```ts
import Aurelia from 'aurelia';
import { GridStackConfiguration } from 'aurelia-gridstack';
import { App } from './app';

Aurelia
  .register(GridStackConfiguration)
  .app(App)
  .start();
```

## Usage

```html
<require from="gridstack/dist/gridstack.min.css"></require>
<grid-stack min-row="5" float>
  <grid-stack-item x="0" y="0" w="2" h="1">
    <div class="item">Item1</div>
  </grid-stack-item>
  <grid-stack-item x="1" y="1" w="2" h="2">
    <div class="item">Item2</div>
  </grid-stack-item>
  <grid-stack-item x="3" y="2" w="1" h="2">
    <div class="item">Item3</div>
  </grid-stack-item>
</grid-stack>

Or with bindings:

<grid-stack min-row="5" float>
  <grid-stack-item repeat.for="i of items" x.bind="i.x" y.bind="i.y" w.bind="i.w" h.bind="i.h">
    <div class="item">
      <div>Item ${$index + 1}</div>
      <div>x: ${i.x}</div>
      <div>y: ${i.y}</div>
      <div>w: ${i.w}</div>
      <div>h: ${i.h}</div>
    </div>
  </grid-stack-item>
</grid-stack>
```

```ts
items = [
  { x: 0, y: 0, w: 2, h: 1 },
  { x: 1, y: 1, w: 2, h: 2 },
  { x: 3, y: 2, w: 1, h: 2 }
];
```

### Static

You can lock a grid by setting `static` on the grid-stack component:

```html
<grid-stack static></grid-stack>
```

## Contribution

If you feel that something is missing please submit an issue or better yet a PR.

---
_Source: https://npm.io/package/aurelia-gridstack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._