CSS网格全宽移动，中心桌面没有媒体查询

Question

我正在尝试使用CSS网格。我希望桌面左右有白色空间，但在移动设备中，它应该占据整个屏幕。

我知道我可以通过媒体查询来做到这一点。如何在不使用媒体查询的情况下在CSS网格中制作相同的布局？

这是一个Codepen，带有我到目前为止的代码。

https://codepen.io/jrock2004/pen/vdqgMg

这是CSS代码

.container {
    display: grid;
    grid-template-columns: 1fr 768px 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        ". header ."
        ". main ."
        ". footer .";
}

思想？