I used to hate grid for forms until I tried it last week on a contact page

For 3 years I always used flexbox for form layouts because I thought grid was overkill. Then I had a contact page with 7 fields that needed to stack differently on mobile versus desktop. I spent an afternoon in late October trying grid with grid-template-areas and it made the responsive breakpoints so much easier. Has anyone else found a weird use case where grid actually ended up being simpler than flex?

2 comments

2 Comments

grace9265d ago

Spent way too many hours manually tweaking flex-wrap widths before realizing grid literally lets you name your areas and just rearrange them like puzzle pieces. Felt pretty dumb when it clicked but hey, better late than never.

charles_henderson5d ago

Yeah you ever notice how flexbox starts acting weird the second you have more than like 4 form fields? Grid-template-areas is honestly the cheat code nobody talks about. I did a checkout form last month with labels on the left on desktop, top on mobile, and it took maybe 10 minutes total. Flex would have been an afternoon of margin hacks for sure.