Roma KomarovWhat was the last thing you wanted to do with #CSS but couldn’t?
Dion@kizu We had to use JS for the upcoming redesign of custom fields on Mastodon profiles. The design spec defined wrapping items to be sized based on their (user-generated) content, but to have their widths rounded up to "snap to" even column edges. The first half of that is easy to achieve using flexbox, the latter half seemingly impossible (including with grid) if you can't manually assign classes that determine how many columns an item can span.
@kizu For a bit more context, the PR where this was implemented: https://github.com/mastodon/mastodon/pull/37976
It's been the first time in a good while that a simple looking non-masonry layout stumped me like that. My initial reaction was that we'd surely find a way to implement it without JS.
Profile redesign: Account fields grid by ChaosExAnima · Pull Request #37976 · mastodon/mastodon
This updates the account fields to match the latest design. In this version, each field is a card that can cover 1-4 columns in a grid. Content that still overflows is pushed into a modal, with an ...
@diondiondion yeah, that's a tricky one! I think the closest we could get to it is with something like `calc-size()` (only in Chrome for now) — https://codepen.io/kizu/pen/EagXbav — but even then items don’t know about the nearby element’s sizes, and flex-grow works _after_ the calc-size calculation, so there could be gaps present.
@kizu Ah, that's epic, thank you! I was hoping that the `round` function could help with this, need to look more into `calc-size`. Once this is more widely supported, it should make for a much better baseline to enhance it with JS from, to fill any gaps.
@kizu At the same time, do you think it'd make sense to raise this case as an issue/gap somewhere, to encourage solving this in a simpler way? Something like `auto-span` for grid.
@diondiondion I think I remember this being mentioned somewhere, will need to find if it was an issue, or just something in a comments. But yes, the general idea is for sure something we'd want to have, it is just pretty tricky to define.