4 ms·
I was surprised to not see the author call out how amazing template areas are for responsiveness. Using media queries lets you define different grid areas for d
by trescenzi 2y ago
I was surprised to not see the author call out how amazing template areas are for responsiveness. Using media queries lets you define different grid areas for different screens and then your elements can be moved to whatever layout you'd like for that screen size. If you need to hide an element at a certain size just give it display: none at that size.
Here's a very simple example: https://codepen.io/trescenzi/pen/vYqpjvL https://codepen.io/trescenzi/pen/vYqpjvL.
- wonger_ 2y agoThe author shows media query examples like that in 6.2 and 6.4. But I thought that using screen size media queries is an anti-pattern, and that we should be aiming for fluid design without arbitrary breakpoints.
- mediumsmart 2y agoThat’s how I understood it too and it works. But the navtoggle and maybe asides need the width trigger it seems. I want to learn named areas in grid and just use that. Going to read the article and do that.