通常，当您创建块元素时，元素的宽度默认为100%。 除非您尝试使用margin:auto将元素居中，否则该规则仍然适用于网格内部。 当在网格内使用Margin:auto将块元素居中时，元素会收缩以适应内容。 您可以通过显式地将宽度设置为100%来更改这一点。 我在下面包括了一个简单的演示。

null

.block {
  display: block;
  border: solid 3px green;
}

.grid {
  display: grid;
  border: solid 3px blue;
}

.content {
  border: solid 3px red;
  margin: 0.5rem auto;
  max-width: 30rem;
}

<div class="block">
  <div class="content">Some content in a block</div>
</div>
<div class="grid">
  <div class="content">Some content in a grid</div>
</div>

null

有人能解释为什么它会这样做吗？