Skip to content

Rows

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

Usage

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

Rows Properties

alignHorizontal

Horizontally aligns the contents.

Code
<Rows 
  alignHorizontal="
left
right
center
center"
  grow
>

alignVertical

Vertically aligns the contents.

Code
<Rows 
  alignVertical="
bottom
top
center
space-between
center"
  grow
>

gap

The space between each Row.

Code
<Rows 
  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

Rows inherits the properties of Box.

Row Properties

height

Sets the height span of the Row (in fractions).

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

Box Properties

Rows inherits the properties of Box.