CSS <display-inside> Data Type

The CSS <display-inside> data type defines an element's inner display type, which determines the formatting context used to lay out the element's contents. It is used as part of the value syntax for the display property.

Syntax

The <display-inside> data type accepts six keyword values:

<display-inside> = flow | flow-root | table | flex | grid | ruby

<display-inside> Values

Value	Description
`flow`	Lays out the element's contents using normal flow, with the exact formatting context depending on the element's outer display type and other properties.
`flow-root`	Lays out the element's contents using flow layout and establishes a new block formatting context.
`table`	Generates a table formatting context for the element's contents.
`flex`	Generates a flex formatting context and lays out the element's children as flex items.
`grid`	Generates a grid formatting context and lays out the element's children as grid items.
`ruby`	Generates a ruby formatting context for ruby annotations.

Outer and Inner Display Types

The display property can describe both an element's outer and inner display behavior. The outer display type determines how the element's principal box participates in the surrounding layout, while the inner display type determines how the element's contents are laid out.

For example, the following declaration gives the element a block outer display type and a flex inner display type:

.example {
  display: block flex;
}

The element participates in its parent layout as a block-level box, while its children are laid out using flexbox.

<display-inside> Example

The following examples use different inner display types to control the layout of three child elements:

.flex-example {
  display: flex;
  gap: 10px;
}
.grid-example {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Browser Result

flex

1 2 3

grid

1 2 3

Both values control the layout of the element's children, but flex creates a flex formatting context while grid creates a grid formatting context.

The <display-inside> data type is used by the display property:

display

Specifications

The <display-inside> data type is defined in the CSS Display Module Level 3 .

CSS <display-inside> Data Type