ThreadSky
About ThreadSky
Log In
donnie.damato.design
•
42 days ago
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
Comments
Log in
with your Bluesky account to leave a comment
[–]
seanleary.bsky.social
•
39 days ago
Same here, but I extract the “magic number” width into a variable.
--col-min-width: 260px;
grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), auto));
2
2
reply
[–]
kevinpowell.co
•
39 days ago
If it's going to be a custom prop, throw it in a min()!
minimax(min(var--col-min-width), 100%), 1fr); is my go to 😊
Works the same, but prevents possible overflows
0
1
reply
[–]
seanleary.bsky.social
•
38 days ago
I use that as well (probably got it from you originally😛), but I decided it was a bit unnecessary to support devices smaller than 300px wide.
2
1
reply
[–]
donnie.damato.design
•
39 days ago
I've found that 260px ends up working well in all of the places I've done this.
1
reply
[–]
jomarrumbawa.com
•
42 days ago
Gonna have to save this one and try it out
1
reply
Posting Rules
Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service
×
Reply
Post Reply
Comments
--col-min-width: 260px;
grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), auto));
minimax(min(var--col-min-width), 100%), 1fr); is my go to 😊
Works the same, but prevents possible overflows