Svelte 5 Grid
Back to examples

Read Only

Set readOnly on the Grid to disable all interactions, or use movable and resizable on individual items for fine-grained control.

Grid-level Read Only

svelte 
<Grid cols={10} rows={10} readOnly>
  <!-- All items are non-interactive -->
</Grid>

Per-item Control

svelte 
<Grid cols={10} rows={10}>
  <!-- Can't be moved, but can be resized -->
  <GridItem x={0} y={0} movable={false}>...</GridItem>

  <!-- Can be moved, but can't be resized -->
  <GridItem x={2} y={0} resizable={false}>...</GridItem>

  <!-- Completely static -->
  <GridItem x={4} y={0} movable={false} resizable={false}>...</GridItem>
</Grid>