3
Just realized Grid template areas saved me 3 hours of headache on a complex dashboard layout last week
I was building a dashboard with like 12 different sections that all needed to shift around at different breakpoints. Tried using nested grids and all this extra markup that just turned into a mess of confusion. Then I remembered grid-template-areas and named my sections things like 'header' 'sidebar' 'main' and 'stats'. Drew out the layout in the CSS itself and it just clicked - no more mental mapping of column and line numbers. Has anyone else found a particular use case where naming the areas beats the numbers approach?
2 comments
Log in to join the discussion
Log In2 Comments
susanm223d ago
Hang on, though - those section names aren't actually HTML attributes, they're just labels you assign in the CSS grid-template-areas property.
6
burns.brooke2d ago
Right?! That one tripped me up so bad when I first started messing with grid. Thought I was being super clever and naming my actual HTML elements wrong for a solid hour lol.
8