Width

Utilities for setting the width of an element.

Auto

Use w="auto" to let the browser calculate and select the width for the element. You can use it to unset a specific width:

<x.div w={{ xs: 24, md: 'auto' }} />

Screen Width

Use w="100vw" to make an element span the entire width of the viewport.

<x.div h={12} w="100vw" />

Scaled Width

All values specified in the sizes theme section are automatically applied. Note there is a little difference for scales between 0 and 1 due to conflicting with fluid range. You have to add a suffix s to target values from theme, like 0.5 becomes 0.5s and 1 becomes 1s.

<x.div>
  <x.div w="1s" />
  <x.div w={8} />
  <x.div w={12} />
  <x.div w={16} />
  <x.div w={24} />
</x.div>

Fixed Width

Any valid value is accepted in width, numbers are converted to px, other units have to be specified.

<x.div>
  <x.div w={123} />
  <x.div w="12px" />
  <x.div w="4rem" />
  <x.div w="3ex" />
</x.div>

Fluid Width

Values from 0 to 1 are converted into percentages. As a fraction or a number, both are an expression. Of course specifying [value]% is also possible.

<x.div display="flex">
  <x.div w={1 / 2}>w=1/2</x.div>
  <x.div w={1 / 2}>w=1/2</x.div>
</x.div>
<x.div display="flex">
  <x.div w={2 / 5}>w=2/5</x.div>
  <x.div w={3 / 5}>w=3/5</x.div>
</x.div>
<x.div display="flex">
  <x.div w={0.2}>w=0.2</x.div>
  <x.div w={0.8}>w=0.8</x.div>
</x.div>
<x.div display="flex">
  <x.div w="calc(50% - 40px)">w=calc(50% - 40px)</x.div>
  <x.div w="calc(50% + 40px)">w=calc(50% + 40px)</x.div>
</x.div>

Responsive

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

<x.div w={{ xs: 1 / 2, md: 1 }} />

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

Customizing

Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the theme.sizes section of your theme.

  // theme.js
  export const theme = {
    sizes: {
+     sm: '8px',
+     md: '16px',
+     lg: '24px',
+     xl: '48px',
    },
  }

Learn more about customizing the default theme in the theme customization documentation.