Use masonry layout instead of CSS columns in TopicMasonryGrid

[nileshtrivedi]

We want most important items to fill up the first ROW instead of first column. But they all have variable heights as well. This can only be done by masonry layout.

[nileshtrivedi]

This is not urgent because we have sort_index available in topics to control the display order. But it would be nice to have.

[widged]

Not quite sure where you want this change and what change you would like. What I presume is on ITemList... which you could address this way.

...
      {:else if format.id == 'video'}
          <sl-tab-panel name={format.id} active={i == 0}>
            <div class="mx-auto gap-5  masonry">
              {#each items.filter((x) => x.links.includes(format.id + '|')) as item}
                <VideoCard {item} />
              {/each}
            </div>
          </sl-tab-panel>
        {:else}
          <sl-tab-panel name={format.id} active={i == 0}>
            <div class="mx-auto gap-5 masonry">
              {#each items.filter((x) => x.links.includes(format.id + '|')) as item}
                <GenericCard {item} />
              {/each}
            </div>
          </sl-tab-panel>
        {/if}
      {/each}
    </sl-tab-group>
  </div>

...

<style>
  .masonry {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 1000px;
  }
</style>

[nileshtrivedi]

This is in topic-gallery/TopicMasonryGrid.svelte (for listing of topics, not items)

We currently use: <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 xl:columns-4 3xl:columns-5 mb-8">

But with this, topic # 2 will go below topic # 1 in the first column. If first column has 6 topics, then topic # 7 will appear at the top of column 2 and ends up getting more visual prominence than topics earlier in the order.

A masonry layout will have this correct ordering instead:

The <TopicMasonryGrid> component is also used on the global topics list page where correct ordering is very important.