11–20 of 41 posts
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
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).
Curious why a lot of grid algorithms/implementations only support items of the same height or width?
And the reason to use this over built-in CSS grids is...
+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/
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
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...
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
And the reason to use this over built-in CSS grids is...
+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/
And the reason to use this over built-in CSS grids is...
+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/