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

prop
type
default
direction
oneOfType
oneOf: : 'row', 'column'
array
object
'row'
alignment
oneOfType
oneOf: : "start", "center", "end", "stretch"
array
object
'start'
htmlTag
oneOf: 'div', 'header', 'article', 'section', 'nav', 'aside', 'footer', 'main'
'div'
children
node
required
isSpread
oneOfType
bool
array
object