@masonry-grid/svelte

MasonryGrid

Standard masonry layout that stacks items by pulling them up to fill gaps.

<script>
  import { MasonryGrid, Frame } from '@masonry-grid/svelte'
</script>

<MasonryGrid
  frameWidth={200}
  gap={10}
>
  <Frame width={4} height={3}>
    <img src='...' alt='' />
  </Frame>
  <!-- more frames... -->
</MasonryGrid>

Props

• frameWidth?: number | string - Minimum width of each frame. Used to calculate grid-template-columns. Can be a number (px) or string with units.
• gap?: number | string - Gap between items. Can be a number (px) or string with units.
• disabled?: boolean - Disable the masonry layout (no transforms/reordering will be applied).
• as?: string - Render as a different element (default: 'div').
• All other HTML attributes are passed through.

BalancedMasonryGrid

Balanced masonry layout that reorders items inside rows to minimize overall grid height.

<script>
  import { BalancedMasonryGrid, Frame } from '@masonry-grid/svelte'
</script>

<BalancedMasonryGrid
  frameWidth={200}
  gap={10}
>
  <Frame width={4} height={3}>
    <img src='...' alt='' />
  </Frame>
  <!-- more frames... -->
</BalancedMasonryGrid>

Props

Same as MasonryGrid.

Frame

Component for defining masonry grid item with aspect ratio.

<script>
  import { Frame } from '@masonry-grid/svelte'
</script>

<Frame
  width={16}
  height={9}
  as='li'
>
  <img src='...' alt='' />
</Frame>

Props

• width: number - Width for aspect ratio calculation (not necessarily real pixel width).
• height: number - Height for aspect ratio calculation (not necessarily real pixel height).
• as?: string - Render as a different element (default: 'div').
• All other HTML attributes are passed through.

masonry

Svelte action for advanced use cases when you need direct access to the masonry grid instance.

<script>
  import { masonry } from '@masonry-grid/svelte'
  import { MasonryGrid as VanillaMasonryGrid } from '@masonry-grid/vanilla'
</script>

<div
  use:masonry={{ type: VanillaMasonryGrid }}
  style="display: grid; overflow: hidden; gap: 10px;"
>
  <!-- children -->
</div>