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