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>
Align and justify
Use alignItems
and justifyContent
in the same way you would use CSS grid.
<>
<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
Array of string and number (units) values
String value
<>
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
Content
Content
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>
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>
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>
More examples
See Layout recipes.
Props
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'
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