Tornado UI | » React Grid

Important! : All React Components Docs are Explaining Only The component and its Properties if you want to know how the structure behind the component work you have to read the regular docs for the component

Important! : All React Components Have a Custom Class and ID Property { className=”..” & id=”..” } to allow you easy customize/manipulate/override the component.

Grid System for React

Tornado Provides Grid System Components to create a layout design grid with a wonderful control to each grid element component you can import those from [path/src/Typescript/React/Grid.tsx] like the code below.

/*======> Tornado Grid System <======*/
import {Container, Row, Column} from './React/Grid';

/*=====> Usage Case <=====*/
<Container></Container>

/*======> OR <======*/
import * as Grid from './React/Grid';

/*=====> Usage Case <=====*/
<Grid.Container></Grid.Container>

Container Component

Tornado React Components Includes a Component Called <Container>…</Container> that give the ability to create a grid/row container the component has a property for size default is : 1200px maxed container width and accepts [ large, fluid ] options large is for 1400px and fluid for 100% Width.

<Container size="large || fluid">..rows..</Container>

Row Component

to create a row for your grid columns to live in tornado provides a React Component Named <Row>…</Row> and it takes multiple options you can know it and find it in the code below all properties are optional.

<Row
    //====> Row Flow Direction
    direction="reverse"
    //====> Spaces Between Columns
    gutter="false || small || medium || large"
    //====> Columns Horizontal Alignment
    alignX="start || center || end || around ||between"
    //====> Columns Vertical Alignment
    alignY="start || center || end"
>..cols..</Row>

Row Column Component

to create a column layout inside your Row tornado provides a React Component Named <Column>…</Column> and it takes multiple options for size consider in your mind that the grid is parent width divided on 12 columns and you tell you’r element how many columns it should fill in each screen size you can know that by looking at the code below ,all properties are optional if you didnt say how many columns its should fill it will take the Auto Mode to fill what ever space available for it.

<Column
    size="12"          //====> Size from 0px Screen Width and Up
    small="6"          //====> Size from 480px Screen Width and Up
    medium="8"         //====> Size from 768px Screen Width and Up
    large="12"         //====> Size from 1100px Screen Width and Up
    xlarge="12"        //====> Size from 1400px Screen Width and Up
    dynamic="5"        //====> Dynamic Size to Define How Many Columns in Each Row
>...</Column>

Masonry Row Mode

in Row Component you can define the type of the grid you want if u want it a normal grid or masonry grid by property called [gridType =”masonry”] when you define the type to masonry type it allows you to access new props for how mutch columns you want in each Row of each Screen

Note and Tip! : When you use the masonry row type you do not have to define a size option for each Column Component

<Row
    //====> Grid Row Type
    gridType="masonry"
    //====> Columns Number in Each Row
    columns="1"
    //====> Columns Number in Each Row for Small Screens and Up
    columnsSmall="1"
    //====> Columns Number in Each Row for Medium Screens and Up
    columnsMedium="3"
    //====> Columns Number in Each Row Large Screens and Up
    columnsLarge="4"
    //====> Columns Number in Each Row xLarge Screens and Up
    columnsxLarge="5"
>..cols..</Row>