Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Link List Loader Logo LogoLoader Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Toast Tooltip
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

Arrange

Content

Usage

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

Based on CSS grid

Arrange component is built with CSS grid. Learn more about CSS grid A Complete Guide to Grid.

Gap

<DemoBox boxType="outline">
  <Arrange gap="medium">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>

<DemoBox boxType="outline">
  <Arrange gap="medium">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>

Align and justify

Use alignItems, alignContent, justifyItems, and justifyContent in the same way you would use CSS grid.

<>
  <DemoBox boxType="outline">
    <Arrange alignItems="end" height={15}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange alignContent="end" height={15}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange justifyItems="end" columns={['1fr', '1fr', '1fr']}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange justifyContent="end">
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
</>

<>
  <DemoBox boxType="outline">
    <Arrange alignItems="end" height={15}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange alignContent="end" height={15}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange justifyItems="end" columns={['1fr', '1fr', '1fr']}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange justifyContent="end">
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
</>

Columns

Works in the same way as CSS grid-template-columns. Pass a string or an array of values.

<>
  Array of string values
  <DemoBox boxType="outline">
    <Arrange gap="small" columns={['1fr', '2fr', '10rem']}>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  Array of string and number (units) values
  <DemoBox boxType="outline">
    <Arrange gap="small" columns={['1fr', '2fr', 20]}>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  String value
  <DemoBox boxType="outline">
    <Arrange gap="small" columns="1fr 2fr 10rem">
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
</>

<>
  Array of string values
  <DemoBox boxType="outline">
    <Arrange gap="small" columns={['1fr', '2fr', '10rem']}>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  Array of string and number (units) values
  <DemoBox boxType="outline">
    <Arrange gap="small" columns={['1fr', '2fr', 20]}>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  String value
  <DemoBox boxType="outline">
    <Arrange gap="small" columns="1fr 2fr 10rem">
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
</>

Use CSS auto-fill() or auto-fit() functions for responsive layouts. Read more about responsive grid Auto-Sizing Columns in CSS Grid.

<DemoBox boxType="outline">
  <Arrange gap="small" columns="repeat(auto-fit, minmax(10rem, 1fr))">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>

<DemoBox boxType="outline">
  <Arrange gap="small" columns="repeat(auto-fit, minmax(10rem, 1fr))">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>

Rows

<DemoBox boxType="outline">
  <Arrange gap="small" rows={['4rem', '8rem', 'auto']} justifyContent="stretch">
    <DemoBox height="100%" padding="xsmall">Content</DemoBox>
    <DemoBox height="100%" padding="xsmall">Content</DemoBox>
    <DemoBox height="100%" padding="xsmall">Content</DemoBox>
  </Arrange>
</DemoBox>

<DemoBox boxType="outline">
  <Arrange gap="small" rows={['4rem', '8rem', 'auto']} justifyContent="stretch">
    <DemoBox height="100%" padding="xsmall">Content</DemoBox>
    <DemoBox height="100%" padding="xsmall">Content</DemoBox>
    <DemoBox height="100%" padding="xsmall">Content</DemoBox>
  </Arrange>
</DemoBox>

Auto flow

By default (and if no columns are passed) autoFlow will be set to column. autoFlow will automatically place the items in a row or column.

<DemoBox boxType="outline">
  <Arrange gap="small" autoFlow="column">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
  <br />
  <Arrange gap="small" autoFlow="row">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>

<DemoBox boxType="outline">
  <Arrange gap="small" autoFlow="column">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
  <br />
  <Arrange gap="small" autoFlow="row">
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>

When using Arrange as a list, use the htmlTag prop to generate semantic list markup.

<DemoBox boxType="outline">
  <Arrange gap="small" htmlTag="ul">
    <li>
      <DemoBox padding="small">Item 1</DemoBox>
    </li>
    <li>
      <DemoBox padding="small">Item 2</DemoBox>
    </li>
    <li>
      <DemoBox padding="small">Item 3</DemoBox>
    </li>
  </Arrange>
</DemoBox>

<DemoBox boxType="outline">
  <Arrange gap="small" htmlTag="ul">
    <li>
      <DemoBox padding="small">Item 1</DemoBox>
    </li>
    <li>
      <DemoBox padding="small">Item 2</DemoBox>
    </li>
    <li>
      <DemoBox padding="small">Item 3</DemoBox>
    </li>
  </Arrange>
</DemoBox>

Responsive props

See available responsive props

For responsive props pass an object where the key is the min-width breakpoint.

prop={{
  default: 'xsmall',
  xsmall: 'xsmall',
  small: 'xsmall',
  medium: 'large',
  large: 'xlarge',
}}

Custom breakpoint

prop={{
  '12em': 'xsmall',
  '28em': 'large',
}}

Available breakpoints

breakpoint	min width
`xsmall`	`31em (496px)`
`small`	`48em (768px)`
`medium`	`64em (1024px)`
`large`	`75em (1200px)`

Responsive examples

Resize the browser to see the effect.

<DemoBox boxType="outline">
  <Arrange
    gap={{
      'default': 'xsmall',
      'xsmall': 'small',
      'small': 'medium',
      'medium': 'large',
      'large': 'xlarge'
    }}
    columns={{
      'default': ['2fr', '1fr'],
      '65em': ['1fr', '1fr', '1fr'],
    }}
  >
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>

<DemoBox boxType="outline">
  <Arrange
    gap={{
      'default': 'xsmall',
      'xsmall': 'small',
      'small': 'medium',
      'medium': 'large',
      'large': 'xlarge'
    }}
    columns={{
      'default': ['2fr', '1fr'],
      '65em': ['1fr', '1fr', '1fr'],
    }}
  >
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
    <DemoBox padding="small">Content</DemoBox>
  </Arrange>
</DemoBox>