Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

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>

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>