It's interesting that you bring this up. I was just pondering over the same topic recently. I've been trying to figure out the best way to create a smooth transition from desktop to mobile responsiveness. My initial approach was to utilize margin: auto;, which worked as expected:
https://i.sstatic.net/o7YEG.jpg
The traditional setup is straightforward, and the same holds true for CSS grid (for example, with grid-template-columns set to 1fr 800px 1fr)
https://i.sstatic.net/I2LZu.jpg
However, the challenge arises when transitioning to mobile devices and smartphones:
On smaller screens, the large side margins are no longer necessary. So, you're left with 1fr columns. My personal approach has been to eliminate margin: auto and rely on flexible fr values for column widths, but it requires some trial and error to find the optimal balance:
https://i.sstatic.net/vKmBK.jpg
This seems to be a common solution that many people adopt. Grid layout involves a shift in mindset towards relative proportions rather than pixel-perfect design.
Aside from this, I haven't come up with any other solutions. Personally, I like using 1fr columns, especially when they include a small margin which enhances the overall look of the page. But, of course, this is just my opinion.
I found a helpful CSS grid article that provided valuable insights into this concept. Hopefully, it will be useful to you as well. Cheers.