Display

Utilities for controlling the display box type of an element.

Block

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>

Flow-Root

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>

Inline

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>

Flex

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>

Grid

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>

Contents

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>

Table

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>

None

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>

Responsive

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.