使用 display:grid 的容器的直接子元素是什么样的显示？答案

【问题标题】：What kind of display are the direct child elements of a container using display: grid?使用 display:grid 的容器的直接子元素是什么样的显示？
【发布时间】：2019-03-05 22:58:37
【问题描述】：

如果HTML中只有一个p标签，背景颜色为蓝色，并且有margin: auto，那么它占据了页面的宽度，宽度和内边距可以改变，像一个内联块。

p {
  background-color: blue;
  margin: auto;
}

&lt;p&gt;Lorem ipsum&lt;/p&gt;

但是，如果我在p 标签中添加一个父div，并让div 成为display: grid，而grid-template-columns: 1fr，那么蓝色背景只占文本的宽度。

div {
  display: grid;
  grid-template-columns: 1fr;
}

p {
  background-color: blue;
  margin: auto;
}

<div>
  <p>Lorem ipsum</p>
</div>

那么，display: grid 是否使子元素具有display: inline-block？

【问题讨论】：

标签： html css css-grid grid-layout

【解决方案1】：

答案是否定的。使用display: grid 不会使子元素display: inline-block。

当您将元素设置为display: grid 或inline-grid 时，您将建立一个网格格式化上下文。这是一个独特的布局结构，有自己的一套规则。某些行为与 块格式化上下文 中的行为一致这一事实是偶然的。

网格项的display 值由网格容器管理。事实上，无论值说什么（在浏览器检查器中）或作者声明什么（你可以将display 设置为任何你想要的），这些值都会被忽略，最终行为由网格容器控制.

弹性项目的display 值的操作方式相同。

更多细节：

CSS 网格规范：§ 6.1. Grid Item Display
CSS Flexbox 规范：§ 4. Flex Items

【讨论】：

我认为这个问题问得不好。 OP 似乎将任何 shrink-to-fit 行为与 inline-block 相关联，因此，只要我们有一个适合其内容宽度的元素，它就必须是 inline-block ，但事实并非如此。我认为值得解释为什么使用他描述的配置会导致我们得到背景仅围绕文本的输出。
@TemaniAfif，我通常会尝试发布符合普遍利益的答案，而不仅仅是 OP。网格项目的display 值通常是神秘或混乱的主题。希望我的回答有助于澄清问题。（此外，自从我发布我的答案以来，这个问题已经发生了很大的变化。）
是的，如果我们按照所述考虑问题/答案，那么一切都很好，但我试图成为 OP（和其他用户）的想法他们可能不理解为什么收缩以适应行为正在发生，导致他们认为我们正在处理 inline-block （你谈到的混乱）......顺便说一句，我记得你对此有一个答案，会尝试找到它
如果我涵盖一个角度，而您涵盖另一个角度，我们将涵盖两种解释和所有访问者的利益 ;-) @TemaniAfif
好吧，我找到了我的答案，这就是我的意思stackoverflow.com/a/50841453/8620333 .. 居中（如使用边距）会缩小元素的解释。（我很确定我看到你的一个与此类似，但有更多细节）

【解决方案2】：

左侧和右侧auto 边距值在弯曲或网格元素的上下文中表现不同。它会将元素完全折叠到其固有宽度，而不是让它按预期展开。

这与 inline-block 显示值会产生的行为类似，但所讨论的元素并非您所怀疑的 inline-block。

div {
	display: grid;
	grid-template-columns: 1fr;
}

p {
  	background-color: blue;
	margin: auto;
}

<div>
  <p>Lorem ipsum</p>
</div>

【讨论】：

我已经解决了问题中的问题，margin: auto 必须在 p 标签上。

【解决方案3】：

这是你描述的代码：

p {
    background-color: blue;
    margin: auto;
}

div {
    display: grid;
    grid-template-columns: 1fr;
}

<div>
	<p>Some content goes here...</p>
</div>

这是带有display: inline-block的代码：

p {
    background-color: blue;
    margin: auto;
}

div {
    display: inline-block;
}

<div>
	<p>Some content goes here...</p>
</div>

如您所见，结果略有不同。如果您要检查控制台并选择网格，它仍然是屏幕的整个宽度，因为您只设置了 1 列。但是，蓝色背景将只占该元素的一小部分。当您在网格内的项目上使用 margin: auto 时，它会在内部居中，就像一个容器。

【讨论】：

【解决方案4】：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    div {
    display: grid;
    grid-template-columns: 1fr;
    }
    p
    {
      background-color: blue;
      margin: auto;
    }
    </style>
    </head>
    <body>
      <div>
          <p>This is the p tag</p>
    </div>
      
    </body>
    </html>

【讨论】：

是的，如果你保持 margin: auto 属性在子元素上会起作用，所以它不是关于 inline-block 属性，margin 属性使
标签占据文本的宽度..跨度>