Here’s a list of all the common CSS display property values and their use cases:

1. display: block;

• Description: The element generates a block-level box. It starts on a new line, takes up the full width available, and pushes other elements down.
• Use Case: Suitable for elements like <div>, <p>, <h1>–<h6>, <section>, etc., where content is separated into blocks.

2. display: inline;

• Description: The element generates an inline-level box. It does not start on a new line and only takes up as much width as needed.
• Use Case: For text-like elements such as <span>, <a>, <strong>, etc., where the element should flow within the surrounding content.

3. display: inline-block;

• Description: The element behaves like an inline element but can have block-level features such as width and height.
• Use Case: Useful when you want an element to flow inline with others but still respect width, height, and padding, like buttons or form elements.

4. display: none;

• Description: The element is not rendered and does not take up space in the layout.
• Use Case: Hiding an element completely, often used for conditional rendering or hiding elements in responsive designs.

5. display: flex;

• Description: Defines a flex container, and its children become flex items. Flexbox allows for easy alignment and distribution of space among items in a container.
• Use Case: Useful for creating responsive layouts, aligning items in a row or column, and distributing space dynamically. Ideal for navbars, grids, and flexible form layouts.

6. display: inline-flex;

• Description: Same as flex, but the container behaves like an inline element while its children are treated as flex items.
• Use Case: When you need flexible layout behavior within an inline flow, such as aligning buttons within a text line or layout for toolbars.

7. display: grid;

• Description: Defines a grid container that enables a two-dimensional grid layout, where children (grid items) can be placed into rows and columns.
• Use Case: Useful for creating complex, responsive layouts. Ideal for designing web layouts with multiple rows and columns, like a gallery or dashboard.

8. display: inline-grid;

• Description: Behaves like grid, but the grid container is inline, meaning it only takes up as much width as its content and behaves like an inline element.
• Use Case: When you need grid functionality but want the container to be part of inline content, such as inline blocks with internal grid layout.

9. display: table;

• Description: The element behaves like a <table> HTML element.
• Use Case: When you want to create table-like layouts without using the actual <table> element, such as aligning data in a grid or rows/columns format.

10. display: table-row;

• Description: The element behaves like a <tr> HTML element (a row in a table).
• Use Case: Used inside elements with display: table to create table rows in custom table layouts.

11. display: table-cell;

• Description: The element behaves like a <td> HTML element (a cell in a table).
• Use Case: For creating table cells within display: table-row elements, allowing for table-like layouts without using actual table tags.

12. display: table-column;

• Description: The element behaves like a <col> HTML element, defining column properties for a table.
• Use Case: Controls the column layout in a table-like structure.

13. display: table-header-group;

• Description: Behaves like a <thead> element. It groups rows as a header section in a table layout.
• Use Case: For creating header sections in custom table layouts.

14. display: table-footer-group;

• Description: Behaves like a <tfoot> element, defining a footer section for a table layout.
• Use Case: Use in combination with table-header-group to create footer sections in table layouts.

15. display: list-item;

• Description: The element behaves like an <li> HTML element and can have a marker (bullet or number) for lists.
• Use Case: Used for creating list items in ordered or unordered lists. Can also be used to make any element behave like a list item.

16. display: run-in;

• Description: The element behaves as a block or inline element, depending on the surrounding context.
• Use Case: Rarely used, but in specific scenarios where a heading flows directly into its following content, like a title and paragraph combination.

17. display: contents;

• Description: The element’s box is not generated, but its children are still rendered and treated as normal elements.
• Use Case: Useful when you want to make a wrapper element invisible in the layout but still retain the behavior of its child elements (e.g., when using div wrappers in HTML for grouping without affecting layout).

18. display: inherit;

• Description: The element inherits the display value from its parent.
• Use Case: When you want a child element to have the same display property as its parent.

19. display: initial;

• Description: Resets the display property to its default value based on the element’s natural behavior (block for <div>, inline for <span>, etc.).
• Use Case: To revert an element’s display property to its default behavior.

20. display: revert;

• Description: Reverts the display property to the browser/user agent style (the default value set by the browser).
• Use Case: To reset the property to the browser default, overriding custom styles.

21. display: flow-root;

• Description: Establishes a new block formatting context. It acts like a block but also contains floats and clears them.
• Use Case: To prevent content from overflowing when working with floated elements or in scenarios where you need to prevent margin collapsing.

22. display: subgrid; (Experimental)

• Description: A subgrid allows the grid items to inherit the grid tracks (rows or columns) from the parent grid.
• Use Case: When creating nested grid layouts that align with the outer grid.

23. display: ruby;

• Description: The element behaves as a container for Ruby annotations, which are small annotations on top of or next to East Asian characters.
• Use Case: Used for Ruby text in languages like Japanese or Chinese.

24. display: ruby-base;

• Description: The element behaves as the base text over which a Ruby annotation is placed.
• Use Case: Used in Ruby text layouts for East Asian language annotations.

25. display: ruby-text;

• Description: The element behaves as the Ruby annotation text, which is placed near or on the Ruby base text.
• Use Case: Used in conjunction with ruby-base for annotations in Ruby text.

26. display: ruby-base-container;

• Description: Defines the container for the Ruby base element.
• Use Case: For grouping and aligning Ruby base text with Ruby annotations.

27. display: ruby-text-container;

• Description: Defines the container for the Ruby text element.
• Use Case: For aligning and displaying Ruby annotation text.

---

Summary Table:

Display Value	Use Case
block	Block-level elements that take full width and start on a new line.
inline	Inline elements that flow within text without starting a new line.
inline-block	Inline elements that can have width and height.
none	Hides an element completely.
flex	Flexible, responsive layouts using flexbox.
inline-flex	Flexbox layout within an inline flow.
grid	Two-dimensional grid layouts.
inline-grid	Grid layout in an inline context.
table, table-row, table-cell	Table-like layouts without using <table>.
list-item	List items with markers.
contents	Removes the box but renders child elements.
flow-root	Creates a new block formatting context.
ruby, ruby-base, ruby-text	Ruby text annotation for East Asian languages.
inherit, initial, revert	To inherit or reset display values.