Use-Cases of this video
- Know about the newly introduced two-valued syntax for CSS display property.
The CSS display property has been upgraded to a two-valued syntax. This will allow us to make new layouts that were not possible before.
The CSS display property is now going to support a two-valued syntax, something like display: outside inside, where "outside" refers to display of the outer box of the element, and "inside" refers to the display of the inner box that holds its child elements.
Background
The inside and outside values for display is not a new concept. It was always there, however implicitly.
For example when we specify display: block, it creates a block-level element starting in a new line. However when we specify display: grid, the element also starts in a new line — it means that is a block level element too. The "outside" of the element is block, while child elements "inside" it are set as grid.
Same thing happens when we use display: inline-grid. The element is set as inline, however content inside it is layed out as grid. All this used to happen internally, but with the upgraded syntax we now have the ability to set this ourselves.
Two-Valued Syntax
The two-valued syntax explicitly allows us to set the outer and inner display types.
So display: grid can be written in a two-valued syntax as display: block grid. This explicitly tells that the "outside" display is block, and "inside" display is grid.
Similarly display: inline-grid can be written as display: inline grid.
With this display becomes more powerful, and will allow us to be more creative in our layouts.
The below video from MDN further explains the two-valued syntax. Outside and inside displays may cause a confusion in the beginning, but it is not difficult to grasp.
As of January 2020, only Firefox supports the two-valued syntax for display.