Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

» React Grid

Tornado React Provides React Components for its Grid System that u can use in your react app to build up your layout.

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 <=====*/

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

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

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 Flow Direction
    //====> Spaces Between Columns
    gutter="false || small || medium || large"
    //====> Columns Horizontal Alignment
    alignX="start || center || end || around ||between"
    //====> Columns Vertical Alignment
    alignY="start || center || end"

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.

    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

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
    //====> Grid Row Type
    //====> Columns Number in Each Row
    //====> Columns Number in Each Row for Small Screens and Up
    //====> Columns Number in Each Row for Medium Screens and Up
    //====> Columns Number in Each Row Large Screens and Up
    //====> Columns Number in Each Row xLarge Screens and Up

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.