i love grids, but one quick word of warning: currently, there is not yet support for subgrid (with column/row definitions synched). meaning each grid cell must be a direct child of the grid parent. this gets in my way constantly when i'm trying to do some responsive layout change.

Firefox has supported it since December 2019 ;)

(Yeah, I know that doesn't help with the prevalence of Chrome, but it's worth pointing out since if nothing else it means you can already start learning it)

I've had some success with setting `display: contents` on grid children to avoid having to flatten everything. More detail here: https://css-tricks.com/get-ready-for-display-contents/

It's not a substitute for subgrids, but it does help in some situations.

I had the same realization as you - I thought Flexbox was endgame until I really got into Grid. Both are still very useful, but more and more I see myself using Grid over display flex.