Loading…
6
I just redid my whole photo gallery layout and the difference is insane
For the longest time, I was building my photo gallery pages with flexbox. I had this whole system of media queries to change the number of columns at different breakpoints, and it was a mess of wrapping divs and margin hacks to get the spacing right. It worked, but it felt fragile. Last month, I rebuilt it using CSS Grid with `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));` and a simple `gap: 20px;`. The code went from like 50 lines down to maybe 15. The biggest win was on mobile. With flexbox, the last item would sometimes stretch weirdly if the row wasn't full. With Grid, every single image container is perfectly uniform and responsive without a single extra media query. It just works. I feel like I wasted so much time before. Has anyone else made a switch like this and been blown away by how much cleaner it is?
3 comments
Log in to join the discussion
Log In3 Comments
logan_schmidt7mo ago
Yeah, that grid setup feels like finding a cheat code. I fought with flexbox for years doing the same thing. The auto-fit property alone saved me so many weird edge cases.
3
martin.tyler7mo ago
Man, same here. I finally tried grid for a card layout last month and it just clicked. Using minmax with auto-fit meant I didn't need a single media query for it to look right on all screens.
10