使用place-content:center时CSS Grid子项width:100%不生效的排查与解决

我正在使用CSS Grid的place-content:center属性，在固定定位的容器中实现内部div的垂直与水平居中，代码如下：

CSS代码 #

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
  place-content: center;
}
.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
}

HTML代码 #

<div class="outer">
<div class="inner">Some content here</div>
</div>

我希望内部div能够占满可用宽度，同时最大宽度限制为500px，但width:100%属性并未如预期生效。请问这是什么原因？能否在保留Grid布局实现的前提下解决该问题？（我知道有其他居中方案，但出于好奇，希望使用该方法实现。）

原因分析 #

当使用place-content:center时，Grid容器会根据子元素的固有内容宽度自动收缩网格轨道的尺寸，此时子元素的width:100%是相对于这个被收缩后的轨道宽度，而非容器的可用宽度。简单来说，网格轨道被“包裹”住了子元素内容，所以width:100%无法让子元素拉伸到容器的可用宽度范围。

保留Grid布局的解决方法 #

方法一：给Grid容器添加grid-template-columns: minmax(0, 1fr) #

通过指定网格列的尺寸规则，让轨道占据容器的可用宽度，同时允许子元素通过max-width限制最大宽度：

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
  place-content: center;
  grid-template-columns: minmax(0, 1fr); /* 添加这一行 */
}
.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
}

minmax(0, 1fr)会让网格列尽可能占据容器的可用宽度，同时当子元素的max-width生效时，轨道会自动适配子元素的最大宽度，此时width:100%就能正常让子元素填满轨道宽度。

方法二：改用place-items:center配合grid-template-columns: 100% #

将place-content:center替换为place-items:center，同时让网格列占满容器宽度：

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
  place-items: center; /* 替换为place-items */
  grid-template-columns: 100%; /* 让列占满容器宽度 */
}
.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
}

place-items:center是让子元素在网格单元格内部居中，而grid-template-columns:100%确保单元格宽度等于容器可用宽度，此时子元素的width:100%会基于这个满宽单元格生效，同时max-width限制其最大宽度。

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