Shoutout to using grid-template-areas over just rows and columns for complex layouts

I was building a dashboard for a client last month and started with the usual grid-template-columns and grid-template-rows approach. It got messy fast with all the line numbers. Then I switched to grid-template-areas, writing out the layout like a simple map with names like 'header', 'sidebar', 'main'. The visual clarity was a game changer, and I could move sections around by just swapping a word in the map. Why do so many tutorials still push the line number method first when areas are so much easier to read and change?

3 comments

3 Comments

betty_fisher51mo ago

Honestly, why not just use both methods together in the same grid?

casey_campbell1mo ago

But what about when you need to overlap items or fine tune placement? I always find myself going back to line numbers for that pixel level control. Areas are great for the big picture, but they can feel a bit boxy when you need something more precise.

finley_walker575d ago

My friend Sam tried to use ONLY grid areas for his portfolio site last week. He got so mad when his logo and nav link kept butting heads in the header. He spent an hour trying to fix it with areas before he gave up. That's exactly what @casey_campbell means about the boxy feel. He finally mixed in some line numbers just for that one tricky spot and it clicked right into place. Using both lets the areas do the heavy lifting but gives you those tiny fixes.