CSS中width覆盖justify-items导致Grid网格左对齐的原因是什么？

问题原因 #

• 你混淆了Grid容器自身对齐和容器内部子项对齐的控制属性：justify-items 是用来控制网格容器内部的子元素在对应网格轨道中的对齐方式，完全不会影响网格容器本身在其父元素内的对齐规则。
• 未设置固定宽度/max-width时，.nested作为块级元素默认宽度占满父容器100%，此时justify-items: center让内部子项在满宽的容器中居中，视觉上看起来像是整个网格居中了。
• 当你给.nested设置固定宽度/max-width后，网格容器自身的宽度收缩到你设定的数值，而块级元素默认左右外边距为0，会自动对齐到父元素左侧，就出现了你看到的问题。

解决方法 #

给.nested添加属性 margin: 0 auto 即可让网格容器自身在父元素内水平居中，搭配已有的justify-items: center就能实现你想要的「容器居中+内部子项居中」的效果。

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