Jonathan Schofield@urlyman@mastodon.social
After years of using CSS Grid, I’ve recently come to a better understanding of 1fr in a repeat(X, 1fr) context.
I’d always thought of these repeat scenarios (with something like 1fr 1fr 1fr being a different means to the same end) as giving equal width, but that’s not what they do.
When a column’s content occupies more width it will collapse the width of another column where it can. This is incredibly useful:
https://codepen.io/urlyman/pen/ZYWMNde