@elemental-ui-alpha/columns v0.0.2
Columns
import { Columns, Column } from '@elemental-ui-alpha/columns';
Parent
Each child of Columns
represents a single column. By default that column will
span 1 fraction of the total number of children. For variable width columns
please see the docs for Child
.
<Columns>
<Box background="shade" height={40} />
<Box background="dim" height={40} />
<Box background="shade" height={40} />
<Box background="dim" height={40} />
</Columns>
Gap
The gap property defines how much space there should be between each element in the stack. Available gap sizes are:
none
(default)xsmall
small
medium
large
xlarge
<Columns gap="small">
<Box background="shade" padding="small">
fixed: 1
</Box>
<Box background="shade" padding="small">
fixed: 2
</Box>
<Box background="shade" padding="small">
fixed: 3
</Box>
</Columns>
When necessary you can provide a size for each breakpoint, using any "falsy" value to omit a given break.
<Columns gap={['xsmall', null, 'medium', 'large', 'xlarge']}>
<Box background="shade" padding="small">
responsive: 1
</Box>
<Box background="shade" padding="small">
responsive: 2
</Box>
<Box background="shade" padding="small">
responsive: 3
</Box>
</Columns>
Collapse
Provide a breakpoint where the columns should collapse and stack on top of one another.
small
medium
large
xlarge
<Columns gap="small" collapse="xlarge">
<Box background="shade" padding="xlarge" />
<Box background="dim" padding="xlarge" />
<Box background="shade" padding="xlarge" />
</Columns>
Child
Because the column layout uses CSS grid under-the-hood, you're not required to
define a Column
for each child. You may however find it useful for more
dynamic layouts, where each column is not of equal width.
Span & Columns
Use the columns
property to explicitly define the number of columns on the
parent, and the span
property on a given Column
child to define how many
columns it will take up. You can create a more traditional grid-style column
layout, à la Bootstrap:
<Columns gap="small" columns={12}>
<Column span={8}>
<Box background="shade" padding="small">
primary
</Box>
</Column>
<Column span={4}>
<Box background="shade" padding="small">
secondary
</Box>
</Column>
</Columns>
Or get creative with the responsive props:
<Columns gap="small" columns={12}>
<Column span={[12, null, 2]}>
<Box background="shade" padding="small" height={['auto', null, 200]}>
sidebar
</Box>
</Column>
<Column span={[12, null, 8]}>
<Box background="shade" padding="small" height={['auto', null, 200]}>
main
</Box>
</Column>
<Column span={[12, null, 2]}>
<Box background="shade" padding="small" height={['auto', null, 200]}>
sidebar
</Box>
</Column>
</Columns>