Row is a standalone layout component which positions elements horizontally by default, adding space between each element.

Usage

Import

import { Row } from '@passfort/castle'
content_copy
Copy

Example

The Row container uses flexbox under the hood.

<Row>
  <Item />
  <Item width="33%" />
  <Item flex={1} />
</Row>
<Row>
  <Item />
  <Item width="33%" />
  <Item flex={1} />
</Row>
content_copy
Copy
live example

Responsive Styles

A Row can be made responsive with Breakpoints.

import { Breakpoints } from '@passfort/castle'
content_copy
Copy

<Breakpoints
  config={{
    md: 400,
  }}
>
  <Row direction={{ base: 'column', md: 'row' }}>
    <Item />
    <Item flex={2} />
    <Item flex={1} />
  </Row>
</Breakpoints>
<Breakpoints
  config={{
    md: 400,
  }}
>
  <Row direction={{ base: 'column', md: 'row' }}>
    <Item />
    <Item flex={2} />
    <Item flex={1} />
  </Row>
</Breakpoints>
content_copy
Copy
live example