Utilities for controlling the display box type of an element.

React propsCSS Properties
display={keyword}display: {keyword};


Use display="block" to create a block-level element.

<x.div spaceY={4}> <x.span display="block">1</x.span> <x.span display="block">2</x.span> <x.span display="block">3</x.span> </x.div>


Use display="flow-root" to create a block-level element with its own block formatting context.

<x.div spaceY={4}> <x.div display="flow-root"> <x.div my={4}>1</x.div> </x.div> <x.div display="flow-root"> <x.div my={4}>2</x.div> </x.div> </x.div>

Inline Block

Use display="inline-block" to create an inline block-level element.

<x.div spaceX={4}> <x.div display="inline-block">1</x.div> <x.div display="inline-block">2</x.div> <x.div display="inline-block">3</x.div> </x.div>


Use display="inline" to create an inline element.

<x.div spaceX={4}> <x.div display="inline">1</x.div> <x.div display="inline">2</x.div> <x.div display="inline">3</x.div> </x.div>


Use display="flex" to create a block-level flex container.

<x.div display="flex" spaceX={4}> <x.div flex="1 1 0">1</x.div> <x.div flex="1 1 0">2</x.div> <x.div flex="1 1 0">3</x.div> </x.div>

Inline Flex

Use display="inline-flex" to create an inline flex container.

<x.div display="inline-flex" spaceX={4}> <x.div flex="1 1 0">1</x.div> <x.div flex="1 1 0">2</x.div> <x.div flex="1 1 0">3</x.div> </x.div>


Use display="grid" to create a grid container.

<x.div display="grid" gap={4} gridTemplateColumns={3}> {/* ... */} </x.div>

Inline Grid

Use display="inline-grid" to create an inline grid container.

<x.div display="inline-grid" gap={4} gridTemplateColumns={3}> <span>1</span> <span>1</span> <span>1</span> </x.div> <x.div display="inline-grid" gap={4} gridTemplateColumns={3}> <span>2</span> <span>2</span> <span>2</span> </x.div>


Use display="contents" to create a "phantom" container whose children act like direct children of the parent.

<x.div display="flex"> <x.div flex="1 1 0">1</x.div> <x.div display="contents"> <x.div flex="1 1 0">2</x.div> <x.div flex="1 1 0">3</x.div> </x.div> <x.div flex="1 1 0">4</x.div> </x.div>


Use display="table", display="table-caption", display="table-cell", display="table-column", display="table-column-group", display="table-footer-group", display="table-header-group", display="table-row-group" and display="table-row" utilities to create elements that behave like their respective table elements.

<x.div display="table" w="100%"> <x.div display="table-row-group"> <x.div display="table-row"> <x.div display="table-cell">A cell with more content</x.div> <x.div display="table-cell">Cell 2</x.div> <x.div display="table-cell">Cell 3</x.div> </x.div> <x.div display="table-row"> <x.div display="table-cell">Cell 4</x.div> <x.div display="table-cell">A cell with more content</x.div> <x.div display="table-cell">Cell 6</x.div> </x.div> </x.div> </x.div>


Use display="none" to set an element to display: none and remove it from the page layout (compare with visibility="hidden" from the visibility documentation).

<x.div display="flex"> <x.div display="none">1</x.div> <x.div>2</x.div> <x.div>3</x.div> </x.div>


To control the display property of an element at a specific breakpoint, use responsive object notation. For example, adding the property display={{ md: "none" }} to an element would apply the display="none" utility at medium screen sizes and above.

<x.div display={{ md: 'none' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub