Digging Into The Display Property: The Two Values Of Display — Smashing Magazine
In Level 3 of the Display specification, the value of
displayis defined as two keywords. These keywords define the outer value of display, which will beinlineorblockand therefore define how the element behaves in the layout alongside other elements. They also define the inner value of the element — or how the direct children of that element behave.This means that when you say
display: grid, what you are really saying isdisplay: block grid. You are asking for a block level grid container. An element that will have all of the block attributes — you can give it height and width, margin and padding, and it will stretch to fill the container. The children of that container, however, have been given the inner value ofgridso they become grid items. How those grid items behave is defined in the CSS Grid Specification: thedisplayspec gives us a way to tell the browser that this is the layout method we want to use.
As simply put by Rachel:
When you define layout on a box in CSS, you are defining what happens to this box in terms of how it behaves in relation to all of the other boxes in the layout. You are also defining how the children of that box behave.
(Discovered via Stefan Judis)