Divide Width

Utilities for controlling the border width between elements.

React props	CSS Properties
`divideX={size}`	`--x-divide-x-reverse: 0;` `border-right-width: calc({size} * var(--x-divide-x-reverse));` `border-left-width: calc({size} * calc(1 - var(--x-divide-x-reverse)));`
`divideXReverse`	`--x-divide-x-reverse: 1;`
`divideY={size}`	`--x-divide-y-reverse: 0;` `border-top-width: calc({size} * calc(1 - var(--x-divide-y-reverse)));` `border-bottom-width: calc({size} * var(--x-divide-y-reverse));`
`divideYReverse`	`--x-divide-y-reverse: 1;`

Add borders between horizontal children

Add borders between horizontal elements using the divideX={size} utilities.

<x.div
  display="grid"
  gridTemplateColumns={3}
  divideX
  divideColor="emerald-500"
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Add borders between between stacked children

Add borders between stacked elements using the divideY={size} utilities.

<x.div display="grid" gridTemplateColumns={1} divideY divideColor="amber-500">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Reversing children order

If your elements are in reverse order (using say flexDirection="row-reverse" or flexDirection="column-reverse"), use the divideXReverse or divideYReverse utilities to ensure the border is added to the correct side of each element.

<x.div
  display="flex"
  flexDirection="column-reverse"
  divideY
  divideYReverse
  divideColor="rose-500"
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</x.div>

Responsive

To control the borders between elements at a specific breakpoint, use responsive object notation. For example, adding the property divideY={{ md: 2 }} to an element would apply the divideY={2} utility at medium screen sizes and above.

<x.div divideY={{ md: 2 }}>{/* ... */}</x.div>

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

Edit this page on GitHub