Search code examples
htmlcsscss-gridgrid-layout

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

If there is just a p tag in the HTML that has a background color of blue, and has margin: auto, then it takes up the width of the page, and the width and padding can be changed, like an inline-block.

p {
  background-color: blue;
  margin: auto;
}
<p>Lorem ipsum</p>

But if I add a parent div to the p tag, and make the div be display: grid, with grid-template-columns: 1fr, then the blue background only takes up the width of the text. 

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

p {
  background-color: blue;
  margin: auto;
}
<div>
  <p>Lorem ipsum</p>
</div>

So, does display: grid make the child elements have display: inline-block?

Solution

  • The answer is no. Using display: grid does not make the child elements display: inline-block.

    When you set an element to display: grid or inline-grid you establish a grid formatting context. This is a unique layout structure with its own set of rules. The fact that some behaviors coincide with behaviors in a block formatting context is incidental.

    The display value of grid items is governed by the grid container. In fact, it doesn't matter what the value says (in browser inspectors) or what the author declares (you can set the display to anything you want), those values are ignored and the ultimate behavior is controlled by the grid container.

    The display value of flex items operates in the same way.

    More details: