无法扩展全宽的CSS网格

Question

注意：我还制作了一段视频，解释了我的问题：https://www.loom.com/share/9ebf0ab686b54ad9a36bffe375098e49

---

我已经建立了以下CSS网格：

  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    'header header'
    'main sidebar'
    'footer footer';
  min-height: 100vh;
`

这基本上可以正常工作-它为我提供了页眉，页脚，主要内容部分和侧边栏。

我想做的是将Main和Sidebar部分居中-而不是使它们跨过宽度的100％。例如，我们可以看一下该站点的基本页面布局：https://thrivethemes.com/blog/

我想使用CSS Grid做类似的事情-也就是说，具有相同的布局，但是只要将Main和Sidebar部分组合起来就可以达到1180px（在大屏幕上）。

现在，这是我想到的一种解决方案：

  display: grid;
  grid-template-columns: auto 880px 300px auto;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    'header header header header'
    '. main sidebar .'
    'footer footer footer footer';

它有效。但是我想知道是否有更好的方法-不需要我创建不需要使用的额外列？