Html 如何"；“自动扩展”；CSS网格单元格在居中时填充可用空间？

我试图解决一个问题，如果屏幕足够宽，CSS网格将居中，其中的单元格将均匀地分布在可用空间中。这是为了避免在大屏幕（如台式机）上，内容会跨越整个屏幕，从而难以理解

看起来我离这很近，但最后一个似乎是最难的：填充网格单元。这也可能是由于我采取的方法，我只是不理解，但也可能是我不太理解/了解CSS属性

我有最能说明情况的证据。因为一张图片至少有几千字那么好，所以我展示了一个令人痛苦的布局问题：

问题：用文章平衡其他单元格的方法是什么？即，其左右边缘是否与物品在“同一条线上”？（还有一个问题，当文章的大小变小时，会出现一个垂直滚动条，而不是文章包装的内容。）

我认为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;    
    }

---

我在脑子里想了一个想法，添加“侧柱”，看看是否可以扩展这些边。我会的，但我不确定这是否是我要走的道路，我目前的技能，也就是说，有点缺乏CSS

如果我正确理解了这个问题，您希望所有div都是网格容器的100%并与文章内联吗

.container header,
.container nav,
.container footer {
   grid-column: span 3;
   width: 100%;
}

.container section {
   grid-column: span 3;
   width: 100%;
}

您需要为项目添加100%的宽度，它们将与容器的大小一致

---

给你：

你说得对。伙计，我觉得自己像个哑巴。你可能不相信，但我已经在CSS网格上混了几个小时了。。。现在是午夜，成为n00b也没用。我拿着这个跑。干杯不确定这个答案如何解决问题。它只是覆盖了定心。re:

此外，您的问题可能会令人困惑，因为您说问题是“垂直”滚动条。我想你的意思是“水平”。没有必要“处理这种情况”。你可以保持现状。如果您发现我在副本中的答案有帮助，您可以向上投票。使用网格容器上的
justify items:center
，您是将网格项目居中，而不是将其内容居中。如果只想使内容居中，请将居中特性应用于网格项（）。在dupe中有更详细的解释。@Michael_B啊，我看到了flex布局添加的修订版演示。我没有资格说哪个更好，因为两者似乎都能解决问题。也许flex布局提供了更多的工具来解决其他问题，即应用
flex-wrap:nowrap
或在其他媒体查询开始之前删除滚动条的内容，将导航移到侧菜单并包装文本。