Size

Utilities for setting the width and the height of an element.

Usage

Use size={value} to create a square.

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

Responsive

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

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

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.