Column can be used to easily define responsive layout rules.

Usage

Import

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

With Row

Column can be used with a single Row to create a simple layout.

<Row>
  <Column size={2}>
    <Item />
  </Column>
  <Column size={6}>
    <Item />
  </Column>
</Row>
<Row>
  <Column size={2}>
    <Item />
  </Column>
  <Column size={6}>
    <Item />
  </Column>
</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>
    <Column size={2} md={12}>
      <Item />
    </Column>
    <Column size={6}>
      <Item />
    </Column>
  </Row>
</Breakpoints>
<Breakpoints
  config={{
    md: 400,
  }}
>
  <Row>
    <Column size={2} md={12}>
      <Item />
    </Column>
    <Column size={6}>
      <Item />
    </Column>
  </Row>
</Breakpoints>
content_copy
Copy
live example