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
, alignContent
, justifyItems
, and justifyContent
in the same way you would use CSS grid.
<>
<DemoBox boxType="outline">
<Arrange alignItems="end" height={15}>
<DemoBox padding="medium">Content</DemoBox>
<DemoBox padding="small">Content</DemoBox>
<DemoBox padding="xsmall">Content</DemoBox>
</Arrange>
</DemoBox>
<br />
<DemoBox boxType="outline">
<Arrange alignContent="end" height={15}>
<DemoBox padding="medium">Content</DemoBox>
<DemoBox padding="small">Content</DemoBox>
<DemoBox padding="xsmall">Content</DemoBox>
</Arrange>
</DemoBox>
<br />
<DemoBox boxType="outline">
<Arrange justifyItems="end" columns={['1fr', '1fr', '1fr']}>
<DemoBox padding="medium">Content</DemoBox>
<DemoBox padding="small">Content</DemoBox>
<DemoBox padding="xsmall">Content</DemoBox>
</Arrange>
</DemoBox>
<br />
<DemoBox boxType="outline">
<Arrange justifyContent="end">
<DemoBox padding="medium">Content</DemoBox>
<DemoBox padding="small">Content</DemoBox>
<DemoBox padding="xsmall">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
<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.
<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>
Rows
<DemoBox boxType="outline">
<Arrange gap="small" rows={['4rem', '8rem', 'auto']} justifyContent="stretch">
<DemoBox height="100%" padding="xsmall">Content</DemoBox>
<DemoBox height="100%" padding="xsmall">Content</DemoBox>
<DemoBox height="100%" padding="xsmall">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
ResponsiveType
<'start' | 'end' | 'center' | 'stretch'>
'center'
justifyContent
ResponsiveType
<
| 'start'
| 'end'
| 'center'
| 'stretch'
| 'space-around'
| 'space-between'
| 'space-evenly'
>
'start'
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