CSS Display Property Guide: Block, Inline, Flex & Grid

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 /> component
table-row: Behaves like <tr /> component
table-cell: Behaves like <tc /> component
list-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.

Understanding CSS Display Property

Comments

Node.js & JavaScript

CSS Box Model

More from this blog

The Comprehensive Guide to REST API Architecture and Conventions

JavaScript Loading Strategies in Web Page: async and defer

DOM Positioning

CSS Selector Specificity

Command Palette

Comments

Node.js & JavaScript

CSS Box Model

More from this blog