Readit News logoReadit News
e-oj commented on Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts   github.com/e-oj/Magic-Gri... · Posted by u/e-oj
WhitneyLand · 7 years ago
Can 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.

e-oj · 7 years ago
This doesn't and I think most grid solutions keep the items separate
e-oj commented on Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts   github.com/e-oj/Magic-Gri... · Posted by u/e-oj
Eli_P · 7 years ago
Correct 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.
e-oj · 7 years ago
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.
e-oj commented on Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts   github.com/e-oj/Magic-Gri... · Posted by u/e-oj
dakom · 7 years ago
How about a grid of equal-height items, but intersperse something between each row- can this library do that?

For example, consider a bookshelf design where the books are the items and each row has an element underneath it (the element would itself be composed of say 3 images for left and right ends plus the middle)

afaik that's not possible with CSS grid either since grid doesn't have an `nth-row` selector

e-oj · 7 years ago
No, the library doesn't support that. you should be able to achieve the effect with plain html and css though.
e-oj commented on Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts   github.com/e-oj/Magic-Gri... · Posted by u/e-oj
sbr464 · 7 years ago
Curious why a lot of grid algorithms/implementations only support items of the same height or width?
e-oj · 7 years ago
Makes it much easier to segment the grid into rows or columns
e-oj commented on Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts   github.com/e-oj/Magic-Gri... · Posted by u/e-oj
rmdashrfstar · 7 years ago
And the reason to use this over built-in CSS grids is...
e-oj · 7 years ago
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.
e-oj commented on Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts   github.com/e-oj/Magic-Gri... · Posted by u/e-oj
_qbjt · 7 years ago
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

e-oj · 7 years ago
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).

u/e-oj

KarmaCake day94December 31, 2017View Original