How to wrap the component in grid

[PlkMarudny]

Hi, the project is pretty impressive. However, I find difficulties at wrapping it inside a grid, for example like below:

.grid-container {
  display: grid;
  grid-template-columns: 0.4fr 2.3fr 0.3fr;
  grid-template-rows: 0.4fr 2.2fr 0.4fr;
  gap: 0px 0px;
  grid-template-areas:
    ". . ."
    ". images ."
    ". . .";
}

.images { grid-area: images; }

and later:

<div class="grid-container">
  <div class="images">
      <ImageMasonry {images} {targetRowHeight} on:image-click={onClick} let:image >
      <div class="image-overlay">
        <div class="image-text">{image.title}</div>
      </div>
    </ImageMasonry>
  </div>
</div>

The does not scale down along the grid. in such a case. Is there any way to achieve that? (this is Svelte btw)

[fergaldoyle]

Thanks!

You need to set min-width: 0; on .images to override the default min-width: auto to allow the grid item be smaller than it's content, which in turn allows the ImageMasonry component detect width changes and re-calculate.

.images { 
  grid-area: images; 
  min-width: 0;
}

For more information: https://stackoverflow.com/a/43312314/674863

[PlkMarudny]

This works indeed, thank you very much

Tomasz Plonka

On Thu, Mar 4, 2021 at 11:08 PM fergaldoyle notifications@github.com wrote:

Thanks!

You need to set min-width: 0; on .images to override the default min-width: auto to allow the grid item be smaller than it's content, which in turn allows the ImageMasonry component detect width changes and re-calculate.

.images { grid-area: images; min-width: 0; }

For more information: https://stackoverflow.com/a/43312314/674863

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fergaldoyle/image-masonry/issues/8#issuecomment-790857874, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABBI253NKCYH3TDRCY2I5G3TB7LDLANCNFSM4YSW5OMA .