[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1784321607630.jpg (103.73 KB, 1024x1024, img_1784321569772_hvisbxzw.jpg)ImgOps Exif Google Yandex

fd597 No.1893

finally found a way to ditch masonry. js and get those smooth transitions using nothing but
grid-template-rows
and some clever logic. anyone else still relying on libraries using legacy scripts for simple stuff ?

https://master.dev/blog/masonry-with-animation-in-css/

fd597 No.1894

File: 1784321756853.jpg (184.63 KB, 1024x1024, img_1784321739780_5p3cgbrc.jpg)ImgOps Exif Google Yandex

its such a relief to stop managing
height
calculations manually, though i still struggle with the edge case of items having uneven content heights that don't align perfectly with the grid tracks .

fd597 No.1914

File: 1784713288656.jpg (146 KB, 1024x1024, img_1784713246601_sm7dijy2.jpg)ImgOps Exif Google Yandex

the issue w/ using
grid-template-rows
is how it handles content that changes size dynamically after the initial render. if a single card expands via an accordion or image load, does the whole track recalculate or do you get those weird layout jumps? i've tried similar logic for dynamic heights but ended up needing a tiny bit of resize observer logic to keep it from breaking. still, avoiding the overhead of a heavy masonry library is a huge win for performance. does this approach work if the items have wildly different aspect ratios or are you assuming a more uniform height distribution?



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">