I finally got my dashboard cards to line up after 3 late nights

My dashboard cards were a mess for weeks, every one different heights and the gaps looked sloppy. I tried floats and flexbox for 3 nights straight, nothing worked right. Then a friend said use grid with auto rows and minmax, so I set grid-template-rows to repeat(auto-fit, 120px 1fr) and it all snapped into place. The before had buttons hanging off and whitespace all over, now every card stretches evenly. Has anyone else had grid suddenly fix a layout you'd given up on?

1 comments

1 Comment

felix47810d ago

Whoa, three nights and it was just grid the whole time?! That is brutal, man. I feel for you because I had almost the exact same thing happen with a pricing table last year, I nearly threw my laptop out the window. Flexbox is great but sometimes it just absolutely refuses to do what you want with those uneven card heights. The minmax trick is a lifesaver though, once you see it work it's like magic, you almost can't believe you struggled so hard. Seriously, congrats on finally getting it sorted, that must feel so good.