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

https://github.com/e-oj/Magic-Grid

by e-oj • 8 years ago

167 38 8 years ago

github.com

_qbjt• 8 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-oj6• 8 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).

catacombs• 8 years ago

Thanks. This answers the very question I was about to post.

matt4077• 8 years ago

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.

rmdashrfstar• 8 years ago

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

thinkloop• 8 years ago

This should have definitely been addressed in the readme

jtmarmon• 8 years ago

Looks like it's addressed here: https://codeburst.io/magic-grid-f8e2221e7cef

e-oj6• 8 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.

zanny• 8 years ago

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.

jahbrewski• 8 years ago

+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/

PavlovsCat• 8 years ago

That is awesome. Did you see this in the footer?

https://flexboxfroggy.com/

dfa1234• 8 years ago

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?

quickthrower2• 8 years ago

And I guess you can polyfill that back to IE etc.

hardwaresofton3• 8 years ago

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

captain_crabs• 8 years ago

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

hardwaresofton3• 8 years ago

Here's the JSfiddle for that demo:

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

WhitneyLand3• 8 years ago

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.

hardwaresofton3• 8 years ago

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.

sbr464• 8 years ago

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

e-oj6• 8 years ago

Makes it much easier to segment the grid into rows or columns

dakom• 8 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-oj6• 8 years ago

No, the library doesn't support that. you should be able to achieve the effect with plain html and css though.

humphreybc• 8 years ago

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

There's a nice brief writeup about using CSS for masonry layout here: https://regisphilibert.com/blog/2017/12/pure-css-masonry-lay...

gnomodromo• 8 years ago

I've experimented with fully responsive layouts too for my website (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.

turbolent• 8 years ago

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.

ThomPete2• 8 years ago

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

molszanski• 8 years ago

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

ThomPete2• 8 years ago

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.

mdolon• 8 years ago

I made a grid overlay tool years ago, perhaps something in there may be of use? https://devgrow.com/griddy-overlay/

WhitneyLand3• 8 years ago

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?

jogis• 8 years ago

what about ssr?

KenanSulayman• 8 years ago

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

sandGorgon• 8 years ago

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)

WhitneyLand3• 8 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-oj6• 8 years ago

This doesn't and I think most grid solutions keep the items separate

Eli_P• 8 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-oj6• 8 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.

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

Related Stories