如果HTML中只有一个p标签，其背景颜色为蓝色，并且具有margin: auto，那么它会占用页面的宽度，并且可以更改宽度和填充，就像内联块一样。
p {
background-color: blue;
margin: auto;
}<p>Lorem ipsum</p>但是，如果我将一个父div添加到p标签，并使用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？
答案是不。使用display: grid不会使子元素display: inline-block。
将元素设置为display: grid或inline-grid时，可以建立网格格式上下文。这是一个独特的布局结构，具有自己的一套规则。某些行为与块格式化上下文中的行为重合的事实是偶然的。
网格项的display值由网格容器控制。事实上，值（在浏览器检查员中）或作者声明的内容（您可以将display设置为您想要的任何内容）无关紧要，忽略这些值并且最终行为由网格容器控制。
flex项目的display值以相同的方式运行。
更多细节：
左右auto边缘值在弯曲或网格元素的上下文中表现不同。它会将元素完全折叠到其固有宽度，而不是允许它按预期展开。
这与inline-block显示值会产生的行为类似，但有问题的元素并不是你所怀疑的inline-block。
div {
display: grid;
grid-template-columns: 1fr;
}
p {
background-color: blue;
margin: auto;
}<div>
<p>Lorem ipsum</p>
</div>这是您描述的代码：
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时，它会将自己置于内部，就像一个容器。
<!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>