Layout
Grid
24-column flex grid. Row (aliased as Grid) hosts Col children with span, offset, gutters and responsive overrides per breakpoint.
Import
import { Row, Col, Grid } from "@zephora/react";Examples
Spans
Each Row is 24 columns wide; Col spans slice it up.
24
12
12
8
8
8
<Row>
<Col span={24}>24</Col>
</Row>
<Row>
<Col span={12}>12</Col>
<Col span={12}>12</Col>
</Row>
<Row>
<Col span={8}>8</Col>
<Col span={8}>8</Col>
<Col span={8}>8</Col>
</Row>Gutter and offset
`gutter` takes a number (horizontal px) or `[horizontal, vertical]`; `offset` skips columns.
6
6, offset 6
12
12
<Row gutter={[16, 16]}>
<Col span={6}>6</Col>
<Col span={6} offset={6}>6, offset 6</Col>
<Col span={12}>12</Col>
<Col span={12}>12</Col>
</Row>Responsive
sm/md/lg override span and offset from 640/768/1024px up. Resize the viewport to see the change.
A
B
C
<Row gutter={12}>
<Col span={24} md={{ span: 12 }} lg={{ span: 8 }}>A</Col>
<Col span={24} md={{ span: 12 }} lg={{ span: 8 }}>B</Col>
<Col span={24} md={{ span: 24 }} lg={{ span: 8 }}>C</Col>
</Row>API
Row / Grid props
| Prop | Type | Default | Description |
|---|---|---|---|
gutter | number | [number, number] | 0 | Space between columns in px — a number (horizontal) or [horizontal, vertical]. |
align | CSSProperties["alignItems"] | — | align-items value. |
justify | CSSProperties["justifyContent"] | — | justify-content value. |
wrap | boolean | true | Allow columns to wrap. |
unstyled | boolean | false | Headless mode — skips Zephora styling. |
Col props
| Prop | Type | Default | Description |
|---|---|---|---|
span | number | — | Columns to span out of 24. Omitted → flexible (fills remaining space). |
offset | number | — | Columns to skip before this one. |
sm / md / lg | { span?: number; offset?: number } | — | Overrides from the 640px / 768px / 1024px breakpoints up. |
unstyled | boolean | false | Headless mode — skips Zephora styling. |