DEV Community

Discussion on: 3 Ways to create a Navbar (CSS Grid Layout)

Collapse
bariscc profile image
Baris Can Ceylan

Good tips on grid declarations! Similar to flex reverse, grid-template-area is powerful, especially when you need to re-order your grids on multiple breakpoints.
Note that the element order in html doesn't change, so screen readers and focus will follow DOM flow.

Collapse
crayoncode profile image
crayoncode Author

Thanks for positive feedback and for pointing out the focus order, I wasn't aware of that. 😅 A potentially confusing focus order is actually something that would limit using grid areas to reorder elements for me in some situations.