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
More CSS Tips
- 3D parallax effect on hover A perfect 3D parallax illusion using a single image element.
- How to correctly define a one-color gradient The most optimized way to create a one-color gradient.
- The Filling CSS loaders Collection 20 CSS-only single element loaders.
- Default behavior of position absolute Know the meaning of initial containing block and its relation with position absolute.