Distribute

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.

• Semantic spacing value
• Number value
• String value

See also Responsive props

Semantic spacing value

<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.

<Distribute alignment='end'>
  <DemoBox width={12} height={8} />
  <DemoBox width={8} height={4} />
  <DemoBox width={6} height={2} />
</Distribute>

Direction

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

<Distribute direction='column'>
  <DemoBox width={8} height={4} />
  <DemoBox width={8} height={4} />
  <DemoBox width={8} height={4} />
</Distribute>

Spread

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

<DemoBox boxType='outline'>
  <Distribute isSpread>
    <DemoBox width={8} height={4} />
    <DemoBox width={8} height={4} />
  </Distribute>
</DemoBox>

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.

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

<>
  <Distribute
    isSpread={[true, true, false, false]}
    direction={['column', 'row', 'column', 'row']}
    gap={['xsmall','small','medium','large']}
  >
    <DemoBox width={16} height={8} />
    <DemoBox width={8} height={8} />
  </Distribute>
</>

Props