
Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts - e-oj
https://github.com/e-oj/Magic-Grid
======
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](https://github.com/rachelandrew/cssgrid-ama/issues/19)

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

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

~~~
captain_crabs
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%...](https://github.com/wesbos/css-
grid/blob/master/20%20-%20CSS%20Grid%20Image%20Gallery/image-gallery-
FINISHED.html)

~~~
hardwaresofton
Here's the JSfiddle for that demo:

[https://jsfiddle.net/cbjzped2/](https://jsfiddle.net/cbjzped2/)

The problem with that is that the grid rows are determined dynamically:

    
    
        .item.v2 {
          grid-row: span 2;
        }
        .item.v3 {
          grid-row: span 3;
        }
        .item.v4 {
          grid-row: span 4;
        }
        .item.h2 {
          grid-column: span 2;
        }
    

I'd much rather drop in a library like MagicGrid or Masonry and deal with it
from there, to be honest, instead of trying to hack grid to do it. I think
grid _could_ be extended to handle this kind of design but until it is...

------
humphreybc
I spent some time trying to build a simple grid layout with dynamic width and
height items in order for the layout to naturally flow responsively. Most
libraries—like this one—require fixed width items or fixed width containers
with fluid items.

Fully responsive turned out to be a lot harder than I thought it would be due
to lots of rabbit holes, but the algorithm was fairly straightforward. My
first approach was to try CSS Flex and Grid, but they didn't cut the mustard
since they're not really designed for this sort of thing. I then found CSS
Columns and had that working, but it proved too unstable for production use
with issues with the sort order of items, wrapping across columns, and cross-
browser support.

I ended up building our own library: [https://github.com/heydovetail/react-
masonry-responsive](https://github.com/heydovetail/react-masonry-responsive)

There's a nice brief writeup about using CSS for masonry layout here:
[https://regisphilibert.com/blog/2017/12/pure-css-masonry-
lay...](https://regisphilibert.com/blog/2017/12/pure-css-masonry-layout-with-
flexbox-grid-columns-in-2018/)

~~~
gnomodromo
I've experimented with fully responsive layouts too for my website
([http://www.uptopnews.com](http://www.uptopnews.com)) but at the end I just
used css flex gird. I almost build a comment section where the comments are
cards in a grid but that rabbit hole was too deep.

------
Eli_P
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
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.

------
dakom
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
No, the library doesn't support that. you should be able to achieve the effect
with plain html and css though.

------
ThomPete
Now 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](https://cl.ly/a01ae1db0240)

~~~
molszanski
Not sure what your question is. You want something like a 12 column grid? Or
the visual lines?

~~~
ThomPete
The visual lines. I seem to remember a few frameworks i saw a while back which
allow you to control these grid lines and help you do them according to the
golden means.

------
sandGorgon
the state of art here is [https://github.com/bvaughn/react-
virtualized](https://github.com/bvaughn/react-virtualized)
([https://bvaughn.github.io/react-
virtualized/#/components/Lis...](https://bvaughn.github.io/react-
virtualized/#/components/List)) and its successor,
[https://github.com/bvaughn/react-window](https://github.com/bvaughn/react-
window) ([https://react-window.now.sh/#/examples/list/fixed-
size](https://react-window.now.sh/#/examples/list/fixed-size))

------
supernintendo
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](https://github.com/desandro/masonry)

~~~
e-oj
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).

~~~
matt4077
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.

------
turbolent
If you are looking for a more flexible solution with support for any layout
and support for animations, something like iOS' UICollectionView or Android's
RecyclerView, have a look at [https://github.com/turbolent/collection-
view](https://github.com/turbolent/collection-view).

------
WhitneyLand
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...](https://www.pcscoreboards.com/footballscoreboardpro/scoreboardbig.gif)

Notice the red 8 seems to need to overlap between rows.

~~~
e-oj
This doesn't and I think most grid solutions keep the items separate

------
sbr464
Curious why a lot of grid algorithms/implementations only support items of the
same height or width?

~~~
e-oj
Makes it much easier to segment the grid into rows or columns

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

~~~
jahbrewski
+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/](http://cssgridgarden.com/)

~~~
dfa1234
I just started this tutorial. Thats is a "why", not a "how"... So maybe I can
ask here. Why grid-column start include the value and grid column end exclude
it... In fact where there is a ressource for understanding css logic on the
internet?

~~~
kilburn
> Why grid-column start include the value and grid column end exclude it

All CSS grid properties are defined in terms of grid "lines", not cells. If
you have a grid of 2x2 cells, there are actually 3 vertical lines and 3
horizontal lines:

    
    
        1 2 3
      1 ┌─┬─┐
      2 ├─┼─┤
      3 └─┴─┘
    

"grid-column-start: x" means "this area starts the x _vertical line_ "

"grid-column-end: y" means "this area ends at the y _vertical line_ "

As you can see, there is no possible ambiguity here on whether you mean
"inclusive" or "exclusive" like there would be if you referred to cells (which
is why you had this question). That's the reason they chose to go with the
"lines" model.

> In fact where there is a ressource for understanding css logic on the
> internet?

Usually each CSS spec has a rationale and some introduction to the "why" and
the "thinking model" of the spec. For CSS grid you may look at [1].

[1] [https://www.w3.org/TR/css-grid-1/#grid-
concepts](https://www.w3.org/TR/css-grid-1/#grid-concepts)

------
jogis
what about ssr?

------
KenanSulayman
Why do you need yet another library? Not invented here syndrome? A simple
Github search gives me literally thousands of results:
[https://github.com/search?utf8=&q=css+grid](https://github.com/search?utf8=&q=css+grid)

