Row

12 Grids System

Import: import { Row } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={4}>
          <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row>
7
      <Col span={4}>
8
          <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19

Grid Gutter

You can use an array to set vertical spacing, [horizontal, vertical]

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row gutter={[50, 20]}>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row gutter={[50, 20]}>
7
      <Col span={4}>
8
        <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19

Multiple-line Arrangement

The default grid number of the grid system is 12. When there is no custom grid number and one row exceeds 12, the remaining grids will be arranged in a new row.

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row gutter={[20, 50]}>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row gutter={[20, 50]}>
7
      <Col span={4}>
8
        <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
      <Col span={4}>
17
        <PlaceHolder>col-4</PlaceHolder>
18
      </Col>
19
    </Row>
20
  )
21
}
22

Grow

Grid adaptive width.When the number of grids in a row exceeds 12,the remaining grids occupy one row.

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row grow>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row grow>
7
      <Col span={4}>
8
        <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
      <Col span={4}>
17
        <PlaceHolder>col-4</PlaceHolder>
18
      </Col>
19
    </Row>
20
  )
21
}
22

Offset

Set offset of Col components.

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3} offset={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row>
7
      <Col span={3}>
8
        <PlaceHolder>col-3</PlaceHolder>
9
      </Col>
10
      <Col span={3}>
11
        <PlaceHolder>col-3</PlaceHolder>
12
      </Col>
13
      <Col span={3} offset={3}>
14
        <PlaceHolder>col-3</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19

Columns

The default is 12 grids system.You can customize the number of grids by setting columns for the Row Component.

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row columns={24}>
      <Col span={12}>
        <PlaceHolder>col-12</PlaceHolder>
      </Col>
      <Col span={6}>
         <PlaceHolder>col-6</PlaceHolder>
      </Col>
      <Col span={6}>
        <PlaceHolder>col-6</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row columns={24}>
7
      <Col span={12}>
8
        <PlaceHolder>col-12</PlaceHolder>
9
      </Col>
10
      <Col span={6}>
11
         <PlaceHolder>col-6</PlaceHolder>
12
      </Col>
13
      <Col span={6}>
14
        <PlaceHolder>col-6</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19