3 ms·

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

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 2y ago
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_contain...
nicoburns 2y ago
Have you tried media queries?
- bob1029 2y ago
  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.
V99 2y ago
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.
afiori 2y ago
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
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 ago
  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 2y ago
    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.

vim-guru 2y ago

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

nicoburns 2y ago

Have you tried media queries?

bob1029 2y ago
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.

V99 2y ago

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.

afiori 2y ago

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

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 ago
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 2y ago
  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.