Components / Layout

GridLayout

A drag-and-resize tile grid for dashboards: snapping, vertical compaction, responsive columns and a full keyboard move/resize model with live-region announcements.

@ruckc/truss-ui Layout

Import

import { GridLayout } from '@ruckc/truss-ui';

Playground

cols

editable

handle

breakpoints

withStatic

API

Prop	Type	Default	Description
`items` bindable	`GridItem[]`	`[]`	Tiles in grid cells. Bound: drops and resizes write the new layout back.
`cols`	`number`	`12`	Column count (the maximum when `breakpoints` is set).
`rowHeight`	`number`	—	Row height in px. Defaults to twice the density row height, so it follows density modes.
`gap`	`number`	—	Space between tiles in px. Defaults to the `--tr-gap` token.
`editable`	`boolean`	`true`	Turn dragging, resizing and the keyboard model on or off.
`breakpoints`	`Record<number, number>`	—	Container width in px (minimum) → column count, e.g. `{ 0: 1, 600: 6, 1000: 12 }`.
`handle`	`string`	—	CSS selector of the element inside a tile that starts a drag. Omit to drag by the whole tile.
`label`	`string`	`'Dashboard layout'`	Accessible name of the grid.
`itemLabel`	`(item: GridItem) => string`	(item: GridItem) => `Tile ${item.id}`	Accessible name of a tile.
`onchange` event	`(layout: GridItem[]) => void`	—	Called with the new layout after a drop, resize or keyboard commit.
`tile` required snippet	`Snippet<[{ item: GridItem }]>`	—