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

Content

<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 and justifyContent in the same way you would use CSS grid.

Content

<>
  <DemoBox boxType="outline">
    <Arrange alignItems={{
      default: 'end',
      medium: 'start',
      '70em': 'center',
    }}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange justifyContent="space-between">
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
    </Arrange>
  </DemoBox>
</>

<>
  <DemoBox boxType="outline">
    <Arrange alignItems={{
      default: 'end',
      medium: 'start',
      '70em': 'center',
    }}>
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="small">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
    </Arrange>
  </DemoBox>
  <br />
  <DemoBox boxType="outline">
    <Arrange justifyContent="space-between">
      <DemoBox padding="medium">Content</DemoBox>
      <DemoBox padding="xsmall">Content</DemoBox>
      <DemoBox padding="small">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

Content

Array of string and number (units) values

Content

String value

Content

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

Content

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

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.

Content

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

Content

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

More examples

See Layout recipes.

Props

prop

type

default

alignItems

oneOfType

array

object

oneOf: : 'start', 'end', 'center', 'stretch'

'center'

Responsive

justifyContent

oneOfType

array

object

oneOf: : 'start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly'

'start'

Responsive

htmlTag

string

'div'

autoFlow

oneOfType

array

object

oneOf: : 'column', 'row'

Responsive

columns

oneOfType

string

array

object

Responsive

gap

oneOfType

number

string

array

object

Responsive

width

oneOfType

number

string

array

object

Responsive

height

oneOfType

number

string

array

object

Responsive

minWidth

oneOfType

number

string

array

object

Responsive

minHeight

oneOfType

number

string

array

object

Responsive

maxWidth

oneOfType

number

string

array

object

Responsive

maxHeight

oneOfType

number

string

array

object

Responsive