Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

github.com

Post reply on HN
Print view View original

1–10 of 41 posts

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#5

Post by e-oj »

_qbjt wrote: post #2

Neat. We use Masonry [1] although I’m not the biggest fan of it. How does this library compare? [1] https://github.com/desandro/masonry

Depends on the use case. If the grid's items have varying widths then masonry is the better option. However, for a grid with equal width items, I'll definitely go with magic grid. It's just so much lighter (2.3kb minified) than masonry (23.5kb minified).

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#8

Post by jahbrewski »

rmdashrfstar wrote: post #3

And the reason to use this over built-in CSS grids is...

+1 - I recently went looking for a CSS framework (I was still in the “Bootstrap” mindset), and ultimately decided on vanilla CSS grid + flexbox. If anyone is looking for a resource to learn CSS grid, I highly recommend Grid Garden: http://cssgridgarden.com/

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#9

Post by zanny »

e-oj wrote: post #7
rmdashrfstar wrote: post #3

And the reason to use this over built-in CSS grids is...

When the components in a grid have different heights, a single longer or shorter component stretches the whole row or leaves unpleasant whitespace at the bottom.

You can use auto-flow: dense to have the grid backfill gaps. I haven't had much chance to test its limits cross browser yet though but trivial examples have worked for me so far.

It isn't as optimal a layout system as you can get with javascript but generally so long as all elements are at least half the height of other members of a row it doesn't look offensively bad. And there is room for more sophisticated layout algorithms in the future.

And it generally isn't that hard to pad grid items to be multiples of a common height so they can organically fill consistently.

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#10

Post by hardwaresofton »

For those wondering why not just use CSS Grid -- it's not build for that[0] (see @rachelandrew's comment). It's not explained on the repo README but the author goes into it on the explanation blog post.

As mentioned, Masonry[1] is the other famous library for doing this. Magic Grid also has a Vue port[2] if you're into that.

[EDIT] - PR just got merged, explanation of this stuff is on the Github README now

[0]: https://github.com/rachelandrew/cssgrid-ama/issues/19

[1]: https://github.com/desandro/masonry

[2]: https://github.com/imlinus/Vue-Magic-Grid

Post reply on HN