Columns

Width & Gap

One
Two
Three
1import { Columns } from 'layout-ui';
2
3render(
4  <Card>
5    <Columns gap="4px">
6      <Columns.Column width="content">
7        <Box>One</Box>
8      </Columns.Column>
9      <Columns.Column width="75px">
10        <Box>Two</Box>
11      </Columns.Column>
12      <Columns.Column width="100px">
13        <Box>Three</Box>
14      </Columns.Column>
15    </Columns>
16  </Card>,
17);

Alignment (main axis)

One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
1import { Stack, Columns } from 'layout-ui';
2
3render(
4  <Stack gap="16px" direction="vertical">
5    <Card>
6      <Columns gap="4px" align="start" width="400px">
7        <Columns.Column width="100px">
8          <Box>One</Box>
9        </Columns.Column>
10        <Columns.Column width="100px">
11          <Box>Two</Box>
12        </Columns.Column>
13        <Columns.Column width="100px">
14          <Box>Three</Box>
15        </Columns.Column>
16      </Columns>
17    </Card>
18    <Card>
19      <Columns gap="4px" align="center" width="400px">
20        <Columns.Column width="100px">
21          <Box>One</Box>
22        </Columns.Column>
23        <Columns.Column width="100px">
24          <Box>Two</Box>
25        </Columns.Column>
26        <Columns.Column width="100px">
27          <Box>Three</Box>
28        </Columns.Column>
29      </Columns>
30    </Card>
31    <Card>
32      <Columns gap="4px" align="end" width="400px">
33        <Columns.Column width="100px">
34          <Box>One</Box>
35        </Columns.Column>
36        <Columns.Column width="100px">
37          <Box>Two</Box>
38        </Columns.Column>
39        <Columns.Column width="100px">
40          <Box>Three</Box>
41        </Columns.Column>
42      </Columns>
43    </Card>
44    <Card>
45      <Columns gap="4px" align="space-between" width="400px">
46        <Columns.Column width="100px">
47          <Box>One</Box>
48        </Columns.Column>
49        <Columns.Column width="100px">
50          <Box>Two</Box>
51        </Columns.Column>
52        <Columns.Column width="100px">
53          <Box>Three</Box>
54        </Columns.Column>
55      </Columns>
56    </Card>
57    <Card>
58      <Columns gap="4px" align="space-evenly" width="400px">
59        <Columns.Column width="100px">
60          <Box>One</Box>
61        </Columns.Column>
62        <Columns.Column width="100px">
63          <Box>Two</Box>
64        </Columns.Column>
65        <Columns.Column width="100px">
66          <Box>Three</Box>
67        </Columns.Column>
68      </Columns>
69    </Card>
70    <Card>
71      <Columns gap="4px" align="space-around" width="400px">
72        <Columns.Column width="100px">
73          <Box>One</Box>
74        </Columns.Column>
75        <Columns.Column width="100px">
76          <Box>Two</Box>
77        </Columns.Column>
78        <Columns.Column width="100px">
79          <Box>Three</Box>
80        </Columns.Column>
81      </Columns>
82    </Card>
83    <Card>
84      <Columns gap="4px" align="stretch" width="400px">
85        <Columns.Column width="100px">
86          <Box>One</Box>
87        </Columns.Column>
88        <Columns.Column>
89          <Box>Two</Box>
90        </Columns.Column>
91        <Columns.Column width="100px">
92          <Box>Three</Box>
93        </Columns.Column>
94      </Columns>
95    </Card>
96  </Stack>,
97);

Alignment (cross axis)

One
Two
Three
One
Two
Three
One
Two
Three
One
Two
Three
1import { Stack, Columns } from 'layout-ui';
2
3render(
4  <Stack gap="16px">
5    <Card>
6      <Columns gap="4px" alignY="start" height="100px">
7        <Columns.Column width="100px">
8          <Box>One</Box>
9        </Columns.Column>
10        <Columns.Column width="100px">
11          <Box>Two</Box>
12        </Columns.Column>
13        <Columns.Column width="100px">
14          <Box>Three</Box>
15        </Columns.Column>
16      </Columns>
17    </Card>
18    <Card>
19      <Columns gap="4px" alignY="center" height="100px">
20        <Columns.Column width="100px">
21          <Box>One</Box>
22        </Columns.Column>
23        <Columns.Column width="100px">
24          <Box>Two</Box>
25        </Columns.Column>
26        <Columns.Column width="100px">
27          <Box>Three</Box>
28        </Columns.Column>
29      </Columns>
30    </Card>
31    <Card>
32      <Columns gap="4px" alignY="end" height="100px">
33        <Columns.Column width="100px">
34          <Box>One</Box>
35        </Columns.Column>
36        <Columns.Column width="100px">
37          <Box>Two</Box>
38        </Columns.Column>
39        <Columns.Column width="100px">
40          <Box>Three</Box>
41        </Columns.Column>
42      </Columns>
43    </Card>
44    <Card>
45      <Columns gap="4px" alignY="stretch" height="100px">
46        <Columns.Column width="100px">
47          <Box>One</Box>
48        </Columns.Column>
49        <Columns.Column width="100px">
50          <Box>Two</Box>
51        </Columns.Column>
52        <Columns.Column width="100px">
53          <Box>Three</Box>
54        </Columns.Column>
55      </Columns>
56    </Card>
57  </Stack>,
58);