Row

Rows are the used as the wrapper to the Column, they adjust the padding provided by Container by adding row gap and column gap.

Usage

Usage of Row is simple, never use them alone, always use them to group the Columns.

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>
)

Row should never be used alone, always use them to group the Columns.

API reference

For screen size (sm) ≥ 576px row has row gap of 2 * {theme.variables.gutter}rem and column gap {theme.variable.gutter}rem

For screen size (xs) < 576px row has row gap of 1 * {theme.variables.gutter}rem and column gap 0.5 * {theme.variable.gutter}rem

You can change the gutter in your theme file just note the same gutter is used Button, Container and Row