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.

Props