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

Content
Content
Content

Content
Content
Content

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

Rows

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

name
type
default
alignItems
ResponsiveType
<'start' | 'end' | 'center' | 'stretch'>
'center'
justifyContent
ResponsiveType
< | 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly' >
'start'
children
React.ReactNode
width
ResponsiveType
<string | number>
height
ResponsiveType
<string | number>
minWidth
ResponsiveType
<string | number>
minHeight
ResponsiveType
<string | number>
maxWidth
ResponsiveType
<string | number>
maxHeight
ResponsiveType
<string | number>
gap
ResponsiveType
<string | number>
justifyItems
ResponsiveType
<'start' | 'end' | 'center' | 'stretch'>
alignContent
ResponsiveType
< | 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly' >
autoFlow
ResponsiveType
<'column' | 'row'>
columns
ResponsiveGridSections
rows
ResponsiveGridSections
className
never
style
never