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

Question

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

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

<p>Lorem ipsum</p>

但是如果我在 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？

Answer 1

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

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

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

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

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

Answer 2

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

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

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

Answer 4

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

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

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

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

更多详情：

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

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

What kind of display are the direct child elements of a container using display: grid?

html

css

grid-layout

css-grid