如何用CSS grid的grid-template-columns实现最大宽度居中单列布局

完全可以实现，只需调整.grid的网格列配置，移除.grid__content上的宽度相关属性即可，最终效果和原实现完全一致。

调整后的完整代码 #

.grid {
  display: grid;
  /* 定义单列，宽度最大1120px，小于该宽度时自动占满可用空间 */
  grid-template-columns: minmax(0, 1120px);
  /* 列水平居中 */
  justify-content: center;
  width: 100%;
  background-color: #f5f5f5;
}

.grid__content {
  padding: 48px;
  background-color: #ccc;
}

HTML结构无需修改，和原代码保持一致即可：

<div class="grid">
  <div class="grid__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nunc nunc, viverra quis varius et, iaculis condimentum odio. Sed sed commodo massa. Nulla a facilisis quam. Praesent sed nisl arcu. Aenean justo ante, eleifend at aliquet a, congue sit amet ipsum. Integer nunc ligula, tincidunt vel augue vel, pretium ultrices est. Aliquam non risus varius, pretium ex et, eleifend est. Suspendisse pretium urna velit, quis ultricies lacus porta nec. Nullam aliquet elit vitae dolor molestie, sed tristique diam vehicula. Phasellus volutpat placerat nunc.</p>
  </div>
</div>

实现说明 #

• grid-template-columns: minmax(0, 1120px) 定义了唯一的网格列，宽度上限为1120px，小于该值时自动占满容器可用空间，直接替代了原来在.grid__content上设置的width: 100%、max-width: 1120px属性
• justify-content: center 让网格列在容器宽度大于列宽时自动居中，替代了原代码中place-items: center的水平居中作用
• 网格项默认会拉伸占满整个列的宽度，因此不需要额外给.grid__content设置宽度相关属性，也不需要指定box-sizing，布局逻辑全部收敛到网格容器的配置中

内容的提问来源于stack exchange，提问作者Sam