Column

Columns are used to vertically place the content across row(s)

Usage

Using Column is very simple just use them inside your Row(s) to place your content, every Column has fixed minimum width of 200px and maximum width of the parent row.

Simple usage

home.js

import React from 'react'
import { Row, Column, Container, Heading, Text } from '@therise3107/axis'

const home = () => (
    <Container>
        <Row>
            <Column>
                <Heading>Cats 🐱</Heading>
                <Text>Cats are planning global invasion!</Text>
            </Column>
            
            <Column>
                <Heading>Dogs 🐶</Heading>
                <Text>Dogs are here to the rescue!</Text>
            </Column>
        </Row>
    </Container>
)

Columns should always be used as immediate child to Rows

Props, following will only be applied when the screen size matches their respective size:

Props	Size	Type	value
xs	< 576px	number	fixed 1
sm	≥ 576px	number	≥ 0
md	≥ 768px	number	≥ 0
lg	≥ 992px	number	≥ 0
xl	≥ 1200px	number	≥ 0
xxl	1400px	number	≥ 0

Column uses minimum width media query, this means the size of the smallest screen should by default apply to all the larger screens unless explicitly specified

This means <Column sm={1} md={1} lg={1} /> is equivalent to <Column />

Compound usage

home.js

import React from 'react'
import { Row, Column, Container, Heading, Text } from '@therise3107/axis'

const home = () => (
    <Container>
        <Row>
            <Column md={2}>
                <Heading>Cats 🐱</Heading>
                <Text>Cats are planning global invasion!</Text>
            </Column>

            <Column sm={2} md={1}>
                <Heading>Dogs 🐶</Heading>
                <Text>Dogs are here to the rescue!</Text>
            </Column>
        </Row>
    </Container>
)

• The above code will reserve 2 / 3 space for first column, 1 / 3 for second column for screen size ≥ md+

• The above code will reserve 1 / 2 space for first column, 2 / 3 for second column for sm < screen size < md

• Please note, size xs is always 1, so every upcoming parent will also get size 1 this means when the screen-size is <576px the screen will be divided equally and if the content takes more than 200px then the second column will be pushed to the next row

• Another thing to note is, we have to explicitly give md={1} in second column, this means very size after md will all have size = 1