Tornado grid system is A grid based on the flex display property, The grid helps you layout your page in an ordered, easy fashion.
Containers ar a containing element to wrap and centering site contents and is required for the grid system. You may choose one of two containers to use in your projects. Use .container for a responsive fixed width container. or .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container"> <!-- Fixed Container --> </div>
<div class="container-fluid"> <!-- Fluid Container --> </div>
Tornado using a standard 12 column Flexible mobile first responsive grid system scales up to the device or viewport size increases. It includes predefined classes for easy layout options , the columns elements must be placed into a .row container and Rows must be placed within a .container or .container-fluid for proper alignment and padding. except in one case that you use class .no-gutter with the .row container scroll down to see example of columns class of each device screen
<!-- Row -->
<div class="row">
<div class="col-s-12"> </div>
<div class="col-s-12 col-m-6"> </div>
<div class="col-s-12 col-m-6"> </div>
<div class="col-s-12 col-l-4"> </div>
<div class="col-s-12 col-l-4"> </div>
<div class="col-s-12 col-l-4"> </div>
<div class="col-s-12 col-m-6 col-l-7"> </div>
<div class="col-s-12 col-m-6 col-l-5"> </div>
</div>
<!-- // Row -->| <== 640px Mobile Devices | <== 980px Tablet Devices | Desktop Devices 1024px ==> |
| col-s-number | col-m-number | col-l-number |
automatic responsive columns is equal width columns that scales down from desktop to mobile to fit the device viewport its has a limit of 12 columns This feature allows you to create columns may not created with the standard grid for example if you wanna create a 5 equal columns you will not be able to do it with the normal grid. see the example below and try to resize your browser to see how it responds and changing its width to fit the device viewport.
<!-- Row -->
<div class="row">
<div class="box-3x1"> </div> <!-- 3 equal columns in 1 row -->
<div class="box-3x1"> </div> <!-- 3 equal columns in 1 row -->
<div class="box-3x1"> </div> <!-- 3 equal columns in 1 row -->
<div class="box-5x1"> </div> <!-- 5 equal columns in 1 row -->
<div class="box-5x1"> </div> <!-- 5 equal columns in 1 row -->
<div class="box-5x1"> </div> <!-- 5 equal columns in 1 row -->
<div class="box-5x1"> </div> <!-- 5 equal columns in 1 row -->
<div class="box-5x1"> </div> <!-- 5 equal columns in 1 row -->
</div>
<!-- // Row -->| Box Class | Class Definition | Responding Width |
| box-1x1 | one full width box | one box in all devices |
| box-2x1 | Tow equal columns in one row | Desktop : 2 Box's | Tablet : 2 Box's | mobile : 1 Box |
| box-3x1 | 3 equal columns in one row | Desktop : 3 Box's | Tablet : 2 Box's | mobile : 1 Box |
| box-4x1 | 4 equal columns in one row | Desktop : 4 Box's | Tablet : 2 Box's | mobile : 1 Box |
| box-5x1 | 5 equal columns in one row | Desktop : 5 Box's | Tablet : 4 Box's | mobile : 3 Box |
| box-6x1 | 6 equal columns in one row | Desktop : 6 Box's | Tablet : 4 Box's | mobile : 3 Box |
| box-7x1 | 7 equal columns in one row | Desktop : 7 Box's | Tablet : 5 Box's | mobile : 3 Box |
| box-8x1 | 8 equal columns in one row | Desktop : 8 Box's | Tablet : 5 Box's | mobile : 4 Box |
| box-9x1 | 9 equal columns in one row | Desktop : 9 Box's | Tablet : 7 Box's | mobile : 4 Box |
| box-10x1 | 10 equal columns in one row | Desktop : 10 Box's | Tablet : 8 Box's | mobile : 4 Box |
| box-11x1 | 11 equal columns in one row | Desktop : 11 Box's | Tablet : 8 Box's | mobile : 5 Box |
| box-12x1 | 12 equal columns in one row | Desktop : 12 Box's | Tablet : 8 Box's | mobile : 5 Box |
the grid system direction depends on your page direction for exapmle : if the body has direction : rtl the columns flow dynamicly from Right to Left and if has a direction : ltr it will go from Left to Right. and for the columns Gutter is the space between columns and box's it has 30px gutter by default you can increase or decrease the space by class given to the row element cols-gutter-# see the table below to know all class available. and also you can reorder your columns by data attribute data-order="order number"
<!-- Row With Gutter 20px -->
<div class="row cols-gutter-20">
<div class="box-4x1" data-order="2"> </div>
<div class="box-4x1" data-order="4"> </div>
<div class="box-4x1" data-order="1"> </div>
<div class="box-4x1" data-order="3"> </div>
</div>
<!-- // Row With Gutter 20px -->| Class | Class Definition | Element |
| .row-reverse | its reverse the direction of the columns inside the row. | replaced with class .row |
| .row-masonry | masonry layouts required a data attribute for columns number data-columns | replaced to the element with class .row |
| .row-stretch | Filling the Space in the Last Row | added to the element with class .row |
| .row-vCenter | Vertical centering all columns inside the row. | added to the element with class .row |
| .row-hCenter | horizontal centering all columns inside the row. | added to the element with class .row |
| .row-zCenter | horizontal & Vertical centering all columns inside the row. | added to the element with class .row |
| .vAlign-top | Vertical Aligned Top column inside the row. | added to the column element |
| .vAlign-center | Vertical Aligned Center column inside the row. | added to the column element |
| .vAlign-bottom | Vertical Aligned Bottom column inside the row. | added to the column element |
| .cols-gutter-10 | decrease the space between columns to 10px | added to the element with class .row |
| .cols-gutter-20 | decrease the space between columns to 20px | added to the element with class .row |
| .cols-gutter-40 | increase the space between columns to 40px | added to the element with class .row |
| .cols-gutter-50 | increase the space between columns to 50px | added to the element with class .row |