Layout
Row
Storybook
Row
Storybook
The Row component is a flexible container for arranging items in a single row, using a grid system that allows you to configure the width of columns for different screen sizes. It allows you to specify a number of columns and a spacing between them.
Import
1import { Row } from 'dd360-ds'1import Row from 'dd360-ds/Layout/Row'Usage
One div
Two div
Three div
Four div
1import { Row } from "dd360-ds"
2
3<Row>
4 <div>One div</div>
5 <div>Two div</div>
6 <div>Three div</div>
7 <div>Four div</div>
8</Row>
9Custom Row
You can customize the Row component with the following props:
"cols": number of columns to display in the row. Default is 4. Accepts values from 1 to 4. "md": number of columns to display in the row for medium sized screens. Default is 2. Accepts values from 1 to 4. "sm": number of columns to show in the row for small screens. Default is 1. Accepts values from 1 to 4. "gap": space between columns in the row. Default is 4. Accepts values from 1 to 5.
One div
Two div
Three div
1import { Row } from "dd360-ds"
2
3<Row cols={3} md={2} sm={1}>
4 <div>One div</div>
5 <div>Two div</div>
6 <div>Three div</div>
7</Row>
8API Reference
| Name | Types | Default |
|---|---|---|
| "cols" | 1 2 3 4 | 4 |
| "md" | 1 2 3 4 | 2 |
| "sm" | 1 2 3 4 | 1 |
| "gap" | 1 2 3 4 5 | 4 |
| "children" | ReactNode | - |
| "className" | string | - |