5 ms·
I found a really cool way to do this with svelte and css grid a few months ago, based on a blog post I can't seem to find now. A full masonry layout too, not ju
by roblh 2y ago
I found a really cool way to do this with svelte and css grid a few months ago, based on a blog post I can't seem to find now. A full masonry layout too, not just columns, but each element can have dynamic height and width. The thing that made it click for me was that you don't have to make the grid rows and grid columns 1:1 with the full width/height of each element. Making 10px or 20px rows and columns and then using a svelte component for each image that chose a number of columns and rows based on the image aspect ratio. I'll see if I can make the repo public today.
Edit: reading further, I think my approach was basically the same as theirs near the end of the post!
- qingcharles 2y agoYou can make something very close, but you can't order the items the same as you can with the new property (so if the order is important this might be a dealbreaker), and IIRC you end up with less attractive, more-jaggy bottoms to the columns.