Skip to content

Columns

Renders children horizontally, with consistent spacing (if specified) between them. Columns can also have a specific width value.

Usage

Code
import { createSystem } from 'frog/ui'
 
const { Columns, Column } = createSystem()
 
function Example() {
  return (
    <Columns gap="8" grow>
      <Column backgroundColor="red" width="1/4" />
      <Column backgroundColor="red" width="2
2/3
2/4
2/5
2/6
2/7
/4" />
      <Column backgroundColor="red" width="1/4" />
    </Columns>
  )
}

Columns Properties

alignHorizontal

Horizontally aligns the contents.

Code
<Columns 
  alignHorizontal="
left
right
center
space-between
center"
  grow
>

alignVertical

Vertically aligns the contents.

Code
<Columns 
  alignVertical="
bottom
top
center
center"
  grow
>

gap

The space between each column.

Code
<Columns 
  gap="
0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
256
8"
  grow
>

Box Properties

Columns inherits the properties of Box.

Column Properties

width

Sets the width span of the column (in fractions).

Code
import { createSystem } from 'frog/ui'
 
const { Columns, Column } = createSystem()
 
function Example() {
  return (
    <Columns gap="8" grow> 
      <Column backgroundColor="red" width="1/4" /> 
      <Column backgroundColor="red" width="2
2/3
2/4
2/5
2/6
2/7
/4" />
      <Column backgroundColor="red" width="1/4" /> 
    </Columns> 
  )
}

Box Properties

Columnsinherits the properties of Box.