3 ms·

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

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

deleted 8y ago
[deleted]
captain_crabs 8y 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%20Grid%20Image%20Gallery/image-gallery-FINISHED.html https://github.com/wesbos/css-grid/blob/master/20%20-%20CSS%...
- deleted 8y ago
  [deleted]
- hardwaresofton 8y ago
  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...
WhitneyLand 8y 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.
- hardwaresofton 8y 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.

deleted 8y ago

[deleted]

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

deleted 8y ago
[deleted]
hardwaresofton 8y ago
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...

WhitneyLand 8y 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.

hardwaresofton 8y 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.