Gap

Utilities for controlling gutters between grid rows and columns.

Usage

Use gap={space} to change the gap between both rows and columns in grid layouts.

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

Changing row and column gaps independently

Use rowGap={size} and columnGap={size} to change the gap between rows and columns independently.

<x.div display="grid" columnGap={8} rowGap={4} gridTemplateColumns={3}>
  <div>1</div>
  {/* ... */}
  <div>6</div>
</x.div>

Responsive

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

<x.div display="grid" gap={{ md: 2 }}>
  {/* ... */}
</x.div>

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

Customizing

Spacing scale

If you'd like to customize your values for margin, padding, space between, all at once, use the theme.space section of your theme.

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

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

If you don't want to customize it, a set of space is already defined in default theme:

const defaultTheme = {
  // ...
  space: {
    0.5: '0.125rem',
    1: '0.25rem',
    1.5: '0.375rem',
    2: '0.5rem',
    2.5: '0.625rem',
    3: '0.75rem',
    3.5: '0.875rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
    11: '2.75rem',
    12: '3rem',
    14: '3.5rem',
    16: '4rem',
    20: '5rem',
    24: '6rem',
    28: '7rem',
    32: '8rem',
    36: '9rem',
    40: '10rem',
    44: '11rem',
    48: '12rem',
    52: '13rem',
    56: '14rem',
    60: '15rem',
    64: '16rem',
    72: '18rem',
    80: '20rem',
    96: '24rem',
  },
}