Loading…
26
Vent: Spent 4 hours trying to get my grid items to fill a row without stretching.
I had a simple three column layout where the middle item needed to stay a fixed width while the side ones filled the space. I kept messing with grid-template-columns and fr units until I found the 'minmax(0, 1fr)' trick. What other ways do you handle this without breaking the grid?
3 comments
Log in to join the discussion
Log In3 Comments
river_wright6mo ago
That minmax trick is a lifesaver. I usually set the middle column to a fixed pixel width and use auto for the outer ones, lets the content breathe a bit more.
-1
river1836mo ago
Fixed widths in the middle column can backfire on really small screens though. It pushes the auto columns down to zero space, crushing your content. Saw it happen with a 300px center on a mobile nav. The side areas vanished, text overflowed everywhere. Sometimes a minmax on all three, like minmax(auto, 1fr) for the sides, keeps things from fully breaking. Lets them shrink but not die.
-1
emma_young6mo ago
Wait, the side areas just vanished completely? That's a total layout meltdown. How did you even fix it?
2