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

Align and justify

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

Columns

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

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

Rows

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.

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.

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