Repository files navigation

npm install --dev svelte-bricks

The kitchen sink for this component looks something like this:

<script>importMasonryfrom'svelte-bricks'let nItems=$state(30);let items=$derived([...Array(nItems).keys()])let [minColWidth, maxColWidth, gap]= [200,800,20]let width=$state(0), height=$state(0)</script>Masonry size: <span>{width}px</span> &times; <span>{height}px</span> (w &times; h)<Masonry  {items}  {minColWidth}  {maxColWidth}  {gap}style="padding: 20px;"columnStyle="background-color: rgba(0, 0, 0, 0.1);"bind:masonryWidth={width}bind:masonryHeight={height}>  {#snippetchildren({item })}    <Some {item} />  {/snippet}</Masonry>

Note: Ifitems is an array of objects, this component tries to access anid property on each item. This value is used to tell items apart in the keyed{#each} block that creates the masonry layout. Without it, Svelte could not avoid duplicates when new items are added or existing ones rearranged. Read theSvelte docs for details. To change the name of the identifier key, passidKey="some-uniq-key. Or pass a functiongetId = (item: Item) => string | number that maps items to unique IDs.

Hint: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.

Masonry.svelte expects an array ofitems as well as a<slot /> component used to render each of theitems. The array can contain whatever data (objects, strings, numbers) as long as the slot component knows how to handle it.

Additional optional props are:

1. animate:boolean=true

   Whether toFLIP-animate masonry items when viewport resizing or other events causeitems to rearrange.

2. calcCols=(masonryWidth:number,minColWidth:number,gap:number,):number=>{returnMath.min(items.length,Math.floor((masonryWidth+gap)/(minColWidth+gap))||1,)}

   Function used to compute the number of columns based on the masonry width, minimum column width and gap.

3. class:string=``

   Applies to the outerdiv wrapping all masonry columns. For use with CSS frameworks like Tailwind.

4. columnClass:string=``

   Applies to each columndiv.

5. duration:number=200

   Transition duration in milli seconds when masonry items are rearranged or added/removed. Set to 0 to disable transitions.

6. gap:number=20

   Gap between columns and items within each column inpx.

7. getId=(item:Item):string|number=>{if(typeofitem===`number`)returnitemif(typeofitem===`string`)returnitemreturnitem[idKey]}

   Custom function that maps masonry items to unique IDs of typestring ornumber.

8. idKey:string=`id`

   Name of the attribute to use as identifier if items are objects.

9. items:Item[]

   The only required prop are the list of items to render whereItem = $$Generic is a generic type which usually will beobject but can also be simple typesstring ornumber.

10. masonryHeight:number=0

    The masonrydivs height inpx.

11. masonryWidth:number=0

    The masonrydivs width inpx.

12. maxColWidth:number=500

    Maximum column width inpx.

13. minColWidth:number=330

    Minimum column width inpx.

14. style:string=``

    Inline styles that will be applied to the top-leveldiv.masonry.

Besides inline CSS which you can apply through thestyle prop, the following:global() CSS selectors can be used for fine-grained control of wrapper and column styles:

:global(div.masonry) {/* top-level wrapper div */}:global(div.masonry div.col) {/* each column in the masonry layout */}