【发布时间】：2019-01-21 18:34:40
【问题描述】：
我正在尝试解决一个问题，即如果屏幕足够宽，CSS 网格会居中并且其中的单元格均匀地跨越可用空间。这是为了避免在大屏幕（例如台式机）上，内容会跨越整个屏幕而难以理解。
看来我已经接近了，但最后一个似乎是最困难的一个：填充网格单元。这也可能是由于我采用的方法，我只是不明白，但也可能是我对 CSS 属性了解不够。
我有a pen 最能说明情况。而且由于一张图片至少和千字一样好，所以我展示了令人痛苦的布局问题：
问题：用 Article 平衡其他单元格的方法是什么？ IE。他们的左右边缘是否与文章在“同一条线上”？ （还有一个问题，当Article变小时，会出现一个垂直滚动条，而不是Article的内容换行。）
我认为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。 :)
【问题讨论】：
-
在网格容器上使用
justify-items: center，您将居中网格项，而不是它们的内容。如果您只想将内容居中，则将居中属性应用于网格项目 (revised demo)。欺骗中有更详细的解释。 -
@Michael_B 啊，我看到了修改后的演示，添加了 flex 布局。我没有资格判断哪个会更好，因为两者似乎都可以解决问题。也许这种 flex 布局提供了更多工具来解决其他问题，即在其他媒体查询启动之前应用
flex-wrap: nowrap;或其他东西来移除滚动条，将导航移除到侧边菜单并包装文本。