Resizing

A grid item resizes from handles at its edges and corners. You declare which axes are resizable with resizeConfig, and clamp each item’s size with minW / maxW / minH / maxH. resizeConfig is an option on createGridContainer (and, identically, a prop on the <GridLayout> shell):

const container = createGridContainer(() => ({
  layout,
  width,
  onLayoutChange: (next) => (layout = next),
  resizeConfig: { handles: ["se", "e", "s"] },
}));

resizeConfig options

The eight axes are "n", "e", "s", "w", "ne", "nw", "se", "sw". West and north handles keep the opposite edge anchored as you drag; east and south keep the top-left anchored and clamp to the grid’s columns (and maxRows, if set).

Rendering handles (headless)

createGridResizeHandle({ id, handle, group }) models a handle as its own draggable. Attach its attach and spread handleProps onto an element you position and style — handleProps marks the element so a pointer-down resizes instead of starting an item drag:

<!-- Tile.svelte -->
<script lang="ts">
  import { createGridItem, createGridResizeHandle } from "@snapgridjs/svelte";
 
  let { id, group }: { id: string; group: string } = $props();
  // svelte-ignore state_referenced_locally
  const tile = createGridItem({ id, group });
  // svelte-ignore state_referenced_locally
  const resize = createGridResizeHandle({ id, handle: "se", group });
</script>
 
<div {@attach tile.attach} style={tile.style} class="tile">
  {id}
  <!-- CSS places + styles `.resize-handle` at the corner -->
  <span {@attach resize.attach} {...resize.handleProps} class="resize-handle"></span>
</div>

Render one handle per axis you configured. createGridResizeHandle also returns isResizing for styling. See Headless usage for the full picture.

Per-item constraints

Add limits directly to the layout item; snapgrid enforces them as you resize:

const layout = [
  { i: "a", x: 0, y: 0, w: 4, h: 2, minW: 2, minH: 1 }, // never smaller than 2×1
  { i: "b", x: 4, y: 0, w: 4, h: 2, maxW: 6, maxH: 3 }, // never larger than 6×3
];