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.

Responsive props

Use an array with a maximum of 4 values that will be paired with the 4 breakpoints. The array items use the same type of values as their corresponding non-responsive values.

breakpointmin width
xsmall31em (496px)
small48em (768px)
medium64em (1024px)
large75em (1200px)

Gap

<Distribute gap={['xsmall','small','medium','large']}>
<div>Content</div>
<div>Content</div>
</Distribute>

Alignment

<Distribute alignment={['start', 'center', 'end', 'center']}>
<div>Content</div>
<div>Content</div>
</Distribute>

Direction

<Distribute direction={['column', 'row', 'column', 'row']}>
<div>Content</div>
<div>Content</div>
</Distribute>

Spread

<Distribute isSpread={[true, false, true, false]}>
<div>Content</div>
<div>Content</div>
</Distribute>

Responsive demo

Resize the browser

Props

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