为什么带有边距的块元素自动在网格内表现不同？

Question

通常，当您创建一个块元素时，默认情况下该元素的宽度为100％。除非您尝试使用margin: auto将元素居中，否则该规则仍将保留在网格内。在网格内使用margin: auto将块元素居中时，元素将缩小以适合其内容。您可以通过将宽度明确设置为100％来更改此设置。我在下面提供了一个简单的演示。

.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>

有人可以解释为什么会这样吗？

Answer 1

来自the specification：

默认情况下，网格项目会拉伸以填充其网格区域。但是，如果自动对自身或对齐自我进行计算而没有拉伸或边距，则网格项目将自动调整大小以适合其内容。