Distribute component is deprecated, use Arrange component instead. Arrange component has the same features as Distribute and more.

Usage

import { Distribute } from '@loomhq/lens'
<Distribute>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</Distribute>

Gap

Use gap prop to add space between children.

See also Responsive props

Semantic spacing value

nameunitrempx
xsmall0.50.25rem4px
small10.5rem8px
medium21rem16px
large31.5rem24px
xlarge52.5rem40px
xxlarge84rem64px
<Distribute gap="medium">
  <div>Content</div>
  <div>Content</div>
</Distribute>

Number value

The number value will be mutiplied by 8. For example, if we pass 3 it will result in 24px(3*8). The result is converted to REMs, so the final value is 1.5rem (24/16).

<Distribute gap={4}>
  <div>Content</div>
  <div>Content</div>
</Distribute>

String value

Any valid CSS measurement value, for example, auto, 50%, or 10vw.

<Distribute gap="1px">
  <div>Content</div>
  <div>Content</div>
</Distribute>

Alignment

Use alignment prop to align children in relation to each other.

Direction

Use direction prop to line-up children vertically or horizontally.

Spread

Use isSpread prop to push children far apart from each other.

Semantic HTML

Use htmlTag prop to render a more suited element tag. Only default to div if no other element works better. More about Html5 Semantic Elements.

Props

name
type
default
direction
ResponsiveType
<'row' | 'column'>
'row'
alignment
ResponsiveType
<'start' | 'center' | 'end' | 'stretch'>
'start'
htmlTag
| 'div' | 'header' | 'article' | 'section' | 'nav' | 'aside' | 'footer' | 'main'
'div'
children
React.ReactNode
required
isSpread
ResponsiveType
<true | false>
gap
string | number