Inner display vs Outer display
Do you know that the below declarations are the same?
element {
/* old way (always supported for backward compatibility) */
display: inline-grid;
/* new way */
display: inline grid;
display: grid inline;
/* The two values correspond to the
Outer display: I am seen as an "inline" element from the outside
Inner display: I create a "grid" layout inside me
*/
}The display property can take two values in any order:
- The Outer display tells how the element is seen from the outside
- The Inner display tells what kind of layout the element will generate (flexbox, grid, table, etc)
You may ask why making the display property complex?
The reason is simple: If in the future we add new layouts, we don't have to define two values ("x", "inline-x") but only one value ("x")
A masonry layout? We define masonry and we use display: inline masonry and display: block masonry
More detail: Using the multi-keyword syntax with CSS display