Collision: Compress

With collision="compress", items always move to the highest available position. Gaps are automatically filled, creating a compact layout.

Code

Tip: Use autoCompress={false} to disable automatic compression and call controller.compress() manually.

svelte

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

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

<Grid {itemSize} cols={10} collision="compress">
  {#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>