Collision: Push

With collision="push", items push others out of the way when moved. The grid grows vertically to accommodate displaced items.

Code

Note: When using collision="push", rows is automatically set to 0 (infinite), so itemSize.height must be provided.

svelte

<script lang="ts">
  import Grid, { GridItem } from '@appulsauce/svelte-grid';

  const itemSize = { height: 40 };
</script>

<Grid {itemSize} cols={10} collision="push">
  {#each items as item (item.id)}
    <GridItem
      bind:x={item.x}
      bind:y={item.y}
      bind:w={item.w}
      bind:h={item.h}
    >
      ...
    </GridItem>
  {/each}
</Grid>