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

3 Comments

river_wright21d 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

river18320d 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_young17d ago

Wait, the side areas just vanished completely? That's a total layout meltdown. How did you even fix it?