Had to choose between CSS grid and flexbox for a product card layout last week

I was building a set of product cards that needed to wrap differently on mobile versus desktop. Flexbox seemed easier at first but I kept running into alignment headaches when the cards had different content lengths. So I switched to CSS grid with auto-fit and minmax, and it handled the wrapping perfectly in about 10 fewer lines of code. The grid approach also made it simpler to swap the layout from 2 columns to 4 columns at different breakpoints. Has anyone else found grid better for card layouts where the items need to stretch evenly?

2 comments

2 Comments

rowanp159d ago

I ran into that exact same problem with flexbox gaps on cards that had different content heights. Grid with auto-fit and minmax fixed it instantly, plus I could control the gap without extra hacks. The real win for me was being able to set a fixed column width with minmax(250px, 1fr) and let it wrap naturally without media queries. Did you find you needed fewer breakpoints overall after switching?

morgan.cameron9d ago

Tbh I once spent an hour trying to fix flexbox spacing before realizing I just needed a margin reset.