Stumbled onto a grid trick that saved me 3 hours of layout work

Last Thursday I was fighting with a product card grid for a client in Nashville. Kept getting weird gaps on smaller screens until I added grid-auto-rows: 1fr to the container. Suddenly all my cards lined up perfect on every breakpoint. Has anyone else used that property to fix alignment issues without extra media queries?

2 comments

2 Comments

cameron_craig7d ago

Oh man, I gotta chime in here. grid-auto-rows: 1fr does help in some cases but it actually creates issues when your cards have different amounts of content. The fr unit forces everything to be the same height which can cause overflow if something is taller than the grid cell. You might be better off using grid-auto-rows: min-content or grid-template-rows: auto if you want things to flex naturally. Just something to watch for if you run into weird spacing later on.

robinl907d ago

I read an article on CSS-Tricks last week that went into detail about how the fr unit behaves differently than people expect in grid. The author pointed out that 1fr really means "one part of the leftover space after all the other content is placed" which is why it can force equal heights even when it doesn't make sense visually. For ecommerce product cards or blog post previews where content varies, using minmax() with auto tends to give a much more natural looking layout. I've started using subgrid for child elements too, which helps a lot when you have consistent internal structures like a title, image, and button.