Hit 50 responsive grids this week and finally saw the pattern I was missing

I was rebuilding a product page for the 50th time this week and something just clicked. Every single one of my grids before was basically the same pattern with different breakpoints. But this time I was laying out a section with a featured image, a testimonial, and some stats. Instead of my usual 3-column approach I tried using named grid areas for the first time on a real project. It made the media queries so much simpler cause I could just rearrange the areas instead of rewriting the whole grid. I had read about named areas before but it never really sunk in until I needed to shuffle things around at tablet size. Does anyone else have that one CSS Grid feature they ignored forever and then suddenly realized how helpful it actually is?

2 comments

2 Comments

robert_bennett292d ago

Three years of driving the same route to work taught me nothing about back roads until a bridge closure forced a detour last month. It's the same with named grid areas I guess - you think you understand the main road until something forces you off it. Idk, maybe that's just how learning works, needing the right kind of pressure to make a new tool actually click.

jake_mason302d ago

Detours are weird like that, they show you the stuff you've been ignoring the whole time. I had a similar thing with a traffic circle I avoided for years, then one day I had to use it and realized it was way simpler than I thought (saved me ten minutes every morning too). Pressure definitely makes things click faster, but it's annoying that it takes getting stuck to actually learn something new.