In CSS, display
is one of the most used CSS properties. As a value of display
property, most commons are none
, block
, inline
, inline-block
and flex
. Additionally, in different cases, grid
, table
, table-row
, table-cell
and list-item
are used.
Responsibilities of these values are described below,
none: The current elements along with all its children will not be rendered in the browser
block: Takes up the full width, forces a new line, and allows width/height to be set.
inline: Takes up only as much width as needed, does not force a new line, and cannot have width/height set.
inline-block: Combines the behavior of inline (doesn’t force a new line) and block (can have width/height set).
flex: Use block-level flex container
grid: Use block-level grid container
table: Behaves like
<table />
componenttable-row: Behaves like
<tr />
componenttable-cell: Behaves like
<tc />
componentlist-item: Behaves like
<li />
Regarding flexbox
and grid
,
Use flexbox for one dimentional simple layout. However for multi-dimentional complex layout, where both row and column needs to be managed, use grid layout.
Understanding the display
property and its various values is essential for crafting effective and responsive layouts. While simpler layouts benefit from inline
, block
, or flex
, more complex, multi-dimensional layouts are best handled with the grid
property. Choose the appropriate display
value based on the layout requirements to create efficient and maintainable web designs.