Hacker News new | past | comments | ask | show | jobs | submit login

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




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


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


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.




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: