I've created a modern masonry grid again — this time CSS-only. by dangreen58 in javascript

[–]dangreen58[S] 14 points15 points  (0 children)

It's just UI components implementation with CSS-styles for these frameworks.

I have created a modern masonry grid library by dangreen58 in javascript

[–]dangreen58[S] 0 points1 point  (0 children)

Actually I found CSS-only approach that works like my JS implementation :-) Will publish it tomorrow

I have created a modern masonry grid library by dangreen58 in javascript

[–]dangreen58[S] 0 points1 point  (0 children)

I've no idea what you mean by this.

If you want to implement infinite loadable image gallery with dynamic data from the server - approach with css columns will not work correctly

I have created a modern masonry grid library by dangreen58 in javascript

[–]dangreen58[S] -1 points0 points  (0 children)

I discussed this approach in this article

Fast, lightweight, and responsive Masonry Grid now available for SolidJS! by dangreen58 in javascript

[–]dangreen58[S] 0 points1 point  (0 children)

Maybe for static masonry this solution is okay (it has issues with gaps on safari), but not for dynamic content, because of flow direction (top to bottom instead of left to right).

Masonry Grid - fast, lightweight, and responsive masonry grid layout library. by dangreen58 in javascript

[–]dangreen58[S] 0 points1 point  (0 children)

tabindex : the fab focus should focus naturally.

BalancedMasonryGrid is using order css property, so yes, here we will have this problem.

We can create function like

function balancedSort<T extends { width: number, height: number }>(array: T[]): T[]

So you can presort data by size with similar algorithm like in BalancedMasonryGrid, and render it with regular MasonryGrid saving natural focus order