[djstein]

while I love CSS Grid and Areas I still think the hardest part is managing responsiveness especially between mobile and desktop sizes. I find that grid-template-area and the rows / columns sizes needs to be updated via JavaScript based on what UI elements should be open / full screen

I haven’t found a world where minmax or calc fixes this. hope someone has answers!

[vim-guru]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_contain...

[V99]

The way to go with this is to still use a grid, but make the row/col values be css variables ( "var(--foo)" ) instead of fixed values.

Then you can update the value of just that variable from JS, and the grid will reflect it.

[trescenzi]

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.

[wonger_]

The 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]

That’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.

[afiori]

I believe that many such cases can be solved by using :had() and/or subgrids, but I do not have too much experience in this

[nicoburns]

Have you tried media queries?

[bob1029]

I have zero clue why this is downvoted. You can combine media queries and grid template areas to obtain arbitrary cross platform layouts without a single line of javascript.