bug: the gap not work about egjs-grid HOT 13 OPEN

@liuJchun

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

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

from egjs-grid.

@stepanjakl

Modify the column value directly through resize event or resizeObserver.

grid.column = 2 ~ 4

from egjs-grid.

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.

from egjs-grid.

@stepanjakl

align: 'justify', independent of gap.

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

from egjs-grid.

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?

from egjs-grid.

@stepanjakl

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

from egjs-grid.

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?

from egjs-grid.

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.

from egjs-grid.

@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",

from egjs-grid.

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?

from egjs-grid.

@stepanjakl

Try modifying align to "stretch".

from egjs-grid.

Ouh nice, that works, thanks! :)

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

from egjs-grid.

Awesome, thank you. It's great library in any case.

from egjs-grid.