Grid

The Grid component helps in building responsive grid systems. It provides a flexible and efficient way to lay out, align, and distribute space among items in a container, even when their sizes are unknown or dynamic.

Report Issue Github

Usage

Use the Grid components (Row, Col) in combination to create a flexible and responsive grid layout.

Basic Usage


<Row gutter={['4', '4']}>
  <Col xs={24} sm={12} md={8}>
    <Card>
      <Card.Header title={'Item 1'} />
    </Card>
  </Col>
  <Col xs={24} sm={12} md={8}>
    <Card>
      <Card.Header title={'Item 2'} />
    </Card>
  </Col>
  <Col xs={24} sm={12} md={8}>
    <Card>
      <Card.Header title={'Item 3'} />
    </Card>
  </Col>
</Row>

Centering Content

You can center the items in a row by adjusting the justify prop on the Row component.


<Row justify="center">
  <Col md={12}>
    <Card>
      <Card.Header title={'Item 1'} />
    </Card>
  </Col>
</Row>

API

Props

Row

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`gutter`	`[number, number]`	`[0, 0]`	-
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	`'start'`	-
`justify`	`'start' \| 'center' \| 'end' \| 'space-between' \| 'around' \| 'space-evenly'`	`'start'`	-
`MarginProps`	`Token<MarginProps>`	-	-
`PaddingProps`	`Token<PaddingProps>`	-	-
`LayoutProps`	`Token<LayoutProps>`	-	-

Col

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`align`	`'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'`	`'start'`	-
`justify`	`'start' \| 'center' \| 'end' \| 'space-between' \| 'around' \| 'space-evenly'`	`'start'`	-
`xs`	`number`	-	-
`sm`	`number`	-	-
`md`	`number`	-	-
`lg`	`number`	-	-
`xl`	`number`	-	-
`xxl`	`number`	-	-
`MarginProps`	`Token<MarginProps>`	-	-
`PaddingProps`	`Token<PaddingProps>`	-	-
`LayoutProps`	`Token<LayoutProps>`	-	-

Flex

Layout