Hot take: I used to think named grid areas were just extra typing

For about a year, I avoided them and stuck to line numbers. Then I had to rebuild a client's product grid after they changed their mind on the layout three times. Using names like 'product-image' and 'product-title' made those changes take maybe 15 minutes each instead of an hour of recalculating numbers. It clicked when I saw how much easier it was for my teammate to read the code later. Now I start most grids with template areas. Anyone else switch from a skeptic to a believer on a specific Grid feature?

3 comments

3 Comments

shane_anderson6d ago

Oh totally, I had the same exact journey. I thought naming things was just making more work until I had to update a grid on a phone screen size. Seeing 'header' and 'nav' in the media query made it so clear what was moving where. It just makes the code feel like it explains itself.

jesse_white1919d ago

Tell me about it. I was the same way, thinking it was just more stuff to type for no real reason. Then I had to fix a layout that kept changing and my old way with numbers became a total mess. Now I look at that old code and wonder what I was trying to prove, you know? Naming the areas just makes the whole thing read like a map instead of a math test.

grace11119d ago

Wait you actually used numbers for grid areas? I tried that once on a small sidebar and got lost after three lines. I can't imagine doing a whole layout with numbers, like trying to give someone directions using only the seconds on a clock. My brain would just give up trying to remember if the footer was area 7 or area 12.