bug: the gap not work

[liuJchun]

Description

this is a bug?
desc: the gap now work when loading,only work when loaded completely

Steps to check or reproduce

use @egjs/react-grid package will show this problem

[daybrush]

@liuJchun

Probably because batching doesn't happen while loading
The following phenomena may occur.

Try to set data-grid-lazy="true" on item element?

[stepanjakl]

Hi, I'm encountering an issue with columns in which one of the columns with a percentage width doesn't have enough space to fill out its spot when the gap option is set.

Here's a pen.

[daybrush]

@stepanjakl

align: 'justify', independent of gap.

If so, change it to align: "center", "start", "end".

[stepanjakl]

Hi @daybrush, even if I align the columns differently, the layout is not correct. There should be 3 columns instead of 2 as each column has width of 33.333%. Please see the example in the previous message. Preferably, the script should take column width into consideration when calculating the gap?

[daybrush]

@stepanjakl

33.333%, so the sum of the three is 100%.
Therefore, it is difficult to set the gap to 30 (set 0).

[stepanjakl]

Yes, but if I set gap to 0 then there'll be no gap between the columns. I was hoping the script would calculate the gap taking column width into consideration. Does it make sense?

[stepanjakl]

I did sort it out this way btw:

<div class="w-full md:w-[calc(50%-(1rem/2))] lg:w-[calc(33.333333%-(1rem/(3/2)))]{% if loop.index === 1 %} lg:pt-40{% elseif loop.index === 3 %} lg:pt-20{% endif %}">

But this is not an ideal solution. The grid library should ideally compute the gap without me adjusting the column width.

[daybrush]

@stepanjakl

It can't be helped because you set the width yourself.

If you expect to automatically change the width, try setting it with the following option. Instead, you must input the column value directly.

columns: 3,
gap: 30;
align: "stretch",

[stepanjakl]

Okay, I tried it, but it's overflowing its parent container now. Moreover, is there a way to set column breakpoints for different viewport widths?

[daybrush]

@stepanjakl

Try modifying align to "stretch".

[stepanjakl]

Ouh nice, that works, thanks! :)

One more question, how to handle responsivity when it comes number of columns or gap width?

[daybrush]

@stepanjakl

Modify the column value directly through resize event or resizeObserver.

grid.column = 2 ~ 4