如何“自动展开”CSS网格单元以填充居中时的可用空间?[副本]

我试图解决这样一个问题:如果屏幕足够宽,CSS网格居中,其中的单元格均匀地跨过可用空间。这是为了避免在大屏幕(如台式机)上,内容会覆盖整个屏幕,使其难以跟踪。

我有 a pen 这最能说明情况。既然一张图片至少有上千个单词那么好,我就展示了一个让人痛苦的布局问题:

问题: 用什么方法来平衡其他的细胞 ? 一、 它们的左右边缘是否与物品在同一条线上?(还有一个问题,当文章的大小变小时,会出现一个垂直的滚动条,而不是 包装。)

我认为CSS中的相关部分是以

@media only screen and (min-width: 600px) {
    .container {
        grid-template-columns: repeat(3, 1fr);    

       /* These are the pieces that set centering. */
       margin: auto;
       width: 1000px;        
       justify-items: center;    
    }