为什么以及如何准确保证金：自动；影响CSS网格项目？ [复制]

Question

在处理网格时，我意识到为网格项设置 margin: auto; 会极大地改变它们的行为。

我创建了一个简单的例子来说明发生了什么。

如果不为网格项目设置任何margin、width 或height，每个项目的高度和宽度都与我预期的一样。

仅添加margin: auto;，每个网格项的行为似乎都像inline 元素：框采用内容的大小（加上我添加的填充）。但是添加height: 100%; 和width: 100%;，保留margin: auto; 可以修复它。

所以，我并不是说这是错误的，我猜这是预期的行为，我只是不明白。

谁能解释正在发生的事情并可能链接到它的记录位置？

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.grid > div {
  border: 1px solid;
  padding: 1.5rem;
  
  /*
  margin: auto;
  height: 100%;
  width: 100%;
  */
}

<div class="grid">
  <div>1</div>
  <div><h1>text</h1></div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

Answer 1

自动对浮动、内联和绝对元素不起作用，如 article 所示

直接引自网站：

如前所述，auto 在浮动、内联和 绝对元素。所有这些元素已经决定了它们的 布局，因此使用 auto 作为边距和 期望它像那样居中。

这将破坏使用浮动之类的东西的最初目的。 因此 auto 在这些元素中的值为 0px。

如果没有典型的块元素，auto 也将无法工作 一个宽度。到目前为止，我向您展示的所有示例都有宽度。

值为 auto 的宽度将具有 0px 边距。块元素的宽度 通常在自动或 100% 时覆盖其容器，因此 在这种情况下，margin auto 将被计算为 0px。

也看看这个post。