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

Align and justify

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

Content
Content
Content

Content
Content
Content

Columns

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

Array of string values
Content
Content
Content

Array of string and number (units) values
Content
Content
Content

String value
Content
Content
Content

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

Content
Content
Content
Content

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

Content
Content
Content

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

breakpointmin width
xsmall31em (496px)
small48em (768px)
medium64em (1024px)
large75em (1200px)

Responsive examples

Resize the browser to see the effect.

Content
Content
Content

More examples

See Layout recipes.

Props

prop
type
default
alignItems
oneOfType
array
object
oneOf: : 'start', 'end', 'center', 'stretch'
'center'
justifyContent
oneOfType
array
object
oneOf: : 'start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly'
'start'
htmlTag
string
'div'
autoFlow
oneOfType
array
object
oneOf: : 'column', 'row'
columns
oneOfType
string
array
object
gap
oneOfType
number
string
array
object
width
oneOfType
number
string
array
object
height
oneOfType
number
string
array
object
minWidth
oneOfType
number
string
array
object
minHeight
oneOfType
number
string
array
object
maxWidth
oneOfType
number
string
array
object
maxHeight
oneOfType
number
string
array
object