My coworker told me to always use fr units for everything in Grid, but that messed up my gallery layout

I was building a photo gallery last week and my friend at work said to just use fr units for all my columns because they're 'flexible'. So I set up grid-template-columns: repeat(4, 1fr) for a 4-column grid. It looked fine until I added captions with different text lengths, then the columns got all uneven and weird. I switched two of the inner columns to fixed minmax(250px, 1fr) and kept the outer ones as 1fr, and it finally held its shape. Has anyone else found that mixing fr with other units gives you more control than using just fr everywhere?

2 comments

2 Comments

skylerr239d ago

Yeah mixing units is the way to go. I mean, fr units by themselves can get super weird with real content. I had the same thing happen with a card grid, and using minmax with a fixed min like you did was the only fix that worked.

keith_henderson9d ago

Ever notice how fr units just fall apart if you have one really long word in a column? That minmax trick with a fixed min is basically the only way to lock things down without breaking the fluid layout.