Current grid size is: 4px.
Xxlarge space spans 15 rows.
<Stack space="medium">
  <Text>
    Current grid size is: <Strong>{useSpace().grid}</Strong>px.
  </Text>
  <Text>
    Xxlarge space spans <Strong>{useSpace().space.xxlarge}</Strong> rows.
  </Text>
</Stack>
  • Box For custom layouts.
Retrieves the space and grid definitions of the current theme from context.
const { space, grid } = useSpace()

return (
  <Placeholder width={grid * space.xxlarge} height={grid * space.xxlarge} />
)