the state of art here is https://github.com/bvaughn/react-virtualized (https://bvaughn.github.io/react-virtualized/#/components/Lis...) and its successor, https://github.com/bvaughn/react-window (https://react-window.now.sh/#/examples/list/fixed-size)
Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
31–40 of 41 posts
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#32Neat. 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).
I really don't see what's lacking with CSS Grids for equal-with items. Even accommodating different sizes, and allowing reordering for packing, works fine with just CSS.
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#33Can this, or any solution allow for a cell to overlap into another row or column?
Something like this https://www.pcscoreboards.com/footballscoreboardpro/scoreboa...
Notice the red 8 seems to need to overlap between rows.
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#34Correct me if I'm wrong, but using window.addEventListener("resize", () => (), 200) is no good, you probably should consider window.requestAnimationFrame() and debouncing. Otherwise, your library will drain battery juice, despite it's really lightweight. Say, on Android, actions like typing into an input field, changing orientation, scrolling backward and triggering url bar appearing, all of them do trigger costly document reflow.
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#35Correct me if I'm wrong, but using window.addEventListener("resize", () => (), 200) is no good, you probably should consider window.requestAnimationFrame() and debouncing. Otherwise, your library will drain battery juice, despite it's really lightweight. Say, on Android, actions like typing into an input field, changing orientation, scrolling backward and triggering url bar appearing, all of them do trigger costly do…
You're right requestAnimationFrame is more efficient than using the resize listener with a delay. I'm actually working on an update to change that. It'll be fixed soon.
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#36For 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…
But, grid and/or flex box could still do these things by nesting I assume?
So do you mean this is a less complex, more sane way, or did you mean it enables things that couldn’t be done with grid/flex?
Of course sanity is good but it’s an important distinction, say if a simple scenario could avoid a library dep without much extra complexity.
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#37Now that I have a bunch of knowledgeable people in one thread. Anyone know of a good grid layout library/framework. With grid i don't mean the css syntax version but the actual visual design grid that gives you something like: https://cl.ly/a01ae1db0240
You said below you wanted the visual lines.
It really looked like you would have been referrring to the text overlapping multiple columns, is that not related to what you meant?
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#38For 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…
Although I've read through the "css grid isn't meant to do this details", you can get fairly close to this with pure css grid, see here: https://github.com/wesbos/css-grid/blob/master/20%20-%20CSS%...
[deleted]
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#39Can this, or any solution allow for a cell to overlap into another row or column? Something like this https://www.pcscoreboards.com/footballscoreboardpro/scoreboa... Notice the red 8 seems to need to overlap between rows.
This doesn't and I think most grid solutions keep the items separate
Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts
#40For 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…
But, grid and/or flex box could still do these things by nesting I assume? So do you mean this is a less complex, more sane way, or did you mean it enables things that couldn’t be done with grid/flex? Of course sanity is good but it’s an important distinction, say if a simple scenario could avoid a library dep without much extra complexity.
I'm not sure -- the problem is that the height is determined across the whole row -- as soon as you have one item bigger than others in a row it falls apart.
Some of the auto sizing features of grid make it seem like it could work but I haven't seen too many examples, and rachelandrews saying "it's not built for that" is more than enough to discourage me from trying to hack around it.