feat: Option to remove the `gap` inline css

[ericamigo]

Description

just thought this might be a great option es for those who are using tailwind so gaps can be easily controlled depending on the viewport size.

personally, i set 16px gap (gap-4) on mobile then 24px gap (md:gap-6) on tablet or bigger.

Solution

maybe the gap option can accept boolean value or null that when set to false or null, it won't render the gap: 0px; inline style.

Additional context

or totally remove the style="" attribute since we can use the flex class :) not sure though if it contains other css props aside from flex and gap.

Preferences

• I want to be assigned to and work on this issue myself

[DerYeger]

Thank you for the report!

Unfortunately, this isn't a trivial change.
The gap is used to calculate the number of columns, which is why the prop is currently required.

One possible solution would be to set a gap of 0, then handle the spacing yourself via Tailwind on the items.
E.g., translating the below example to Tailwind classes.

.masonry-column:not(:last-child) .my-item {
  margin-right: 2rem;
}

@media only screen and (max-width: 600px) .my-item {
  .masonry-column:not(:last-child) {
    margin-right: 1rem;
  }
}

<template>
  <masonry-wall :items="items" :column-width="300" :gap="0">
    <template #default="{ item }">
      <div class="my-item">
      </div>
    </template>
  </masonry-wall>
</template>

[DerYeger]

I'm closing this for now, because a trivial solution is available as described above.