CSS Display Layout Modes

display: block

By default, it occupies the entire width of the container, pushing adjacent elements to the next line.

display: inline

Similar to naturally flowing text, it occupies space determined by its content, with subsequent elements positioned immediately after. Note that you cannot arbitrarily control the width and height of inline elements.

display: inline-block

This property creates elements that are laid out as inline, but with block properties, meaning you have absolute control over their dimensions. However, they don’t occupy the entire horizontal space, allowing elements to be adjacent to each other.

display: flex

Please refer to my article CSS Flexbox Implementation Cheatsheet

display: grid

Please refer to my article CSS Grid Implementation Cheatsheet

display: none

This setting makes the element disappear from the page entirely.

Others

The website htmlreference.io allows you to quickly look up HTML elements and their display properties.