There are some questions about gap and itemSize

[Sirros]

The following content is from vue2

When I try to set the gap property to achieve consistent spacing per column, since I set the width of the items, the spacing per column is not what I want to see. So I tried setting the column property and removing the item's width css property and found that the image would get bigger.

I think when the user sets the column property, the width of each column should be calculated, the user does not need to design the width property for each item. When the window is resized, the size of each column changes accordingly.

So I wonder if my implementation is wrong or the framework doesn't support it?

[daybrush]

@Sirros

Maybe what you're talking about has something to do with align. The default value is "justify", and the column spacing can be increased to fill the screen.

If you want to center align, use "center".

Use "stretch" if you want to fill the screen and keep the column spacing as a gap.

[Sirros]

@daybrush I found that the layout of the first rendering is also wrong. When I drag the console border, the resize should be triggered, and the layout will be correct at this time.

[daybrush]

@Sirros

There is a high possibility that the size of the container will change during rendering.

If so, it is recommended to set the useResizeObserver option to true.

[Sirros]

@daybrush My settings are as follows, still having problems, maybe you can try to verify this problem. align="stretch" :gap="20" :column="column" :useResizeObserver="true"

[daybrush]

@Sirros

Because stretch was used, the height automatically increased as the width increased, but this was not detected.

https://github.com/naver/egjs-infinitegrid/issues/480 The observeChildren option will be added in this issue.

[Sirros]

@daybrush ok, looking forward~ Thanks for your patience

[daybrush]

@Sirros

InfiniteGrid 4.3.0 is released. use useResizeObserver and observeChildren to true. Thank you :)

[Sirros]

@daybrush thanks for solving