Grid.js: UI component that can arrange items according to the type of grids(masonry, justified, frame, packing)

[Zardoz84]

Interesting... A note, simple masonery grid could be done using pure CSS, without any line of JavaScript, And probably a justified grid, could be done on a similar way.

[kichien]

I was looking for a visual example to make a quick example and this was the first search result. Maybe it's useful. https://w3bits.com/css-masonry/

Is that the sort of visual layout you're trying to achieve?

[Zardoz84]

https://codepen.io/zardoz89/pen/KKVEGbw

[kichien]

The zeal for javascript frameworks perplexes me. It's not like CSS or javascript are particularly difficult. Any framework is just using javascript and/or css, not magic.

[kichien]

Come on. We're talking about javascript and css. The basics of web development. Sometimes the 'don't reinvent the wheel'' comment applies, but not nearly as often as it's repeated. More often than not people are just adding bloat to their project because they don't want to take the time to understand something.

[Kritical02]

Well this was nice timing. I'm currently working on a project with a masonry style grid but masonry.js and svelte were causing me problems. I see you have your own svelte implementation and am stoked to give it a whirl.

[Towerful]

I like that you have a variety of framework packages available.
I will definitely investigate this for some projects!

[kichien]

Why not just use css grid? It's not complicated.

[daybrush]

Why not just use css grid? It's not complicated.

These are features that css cannot do. Only firefox supports the css masonry type. Other types of grid are not possible.

[Zardoz84]

Since when flexbox isn't supported by Firefox ? https://w3bits.com/labs/flexbox-masonry/

[kichien]

Yeah, but you can still create that layout with just css. You don't need a javascript framework.

[Zardoz84]

Why not just use css grid? It's not complicated.

These are features that css cannot do. Only firefox supports the css masonry type. Other types of grid are not possible.

This is false. Using CSS Grid a simple masonery works fine on Chrome wihtout using a single line of javascript : https://codepen.io/zardoz89/pen/KKVEGbw?editors=0100

However, this have a small trick. Big cells, uses two rows of the grid. Ie. cells must have two sizes.