Tornado Logo

Dynamic Grid - Tornado UI v2

Dynamic Grid is equal width columns that scales down from desktop to mobile Dynamicly With one Class of How Match Columns in a Row Line.

Dynamic Grid !?

This feature allows you to create columns may not created with the standard grid for example if you wanna create a 5 or 7 equal columns etc. you will not be able to do it with the standard grid layout see the example below and try to resize your browser to see how it responds and changing its width to fit the device.

x5 Box’s
x5 Box’s
x5 Box’s
x5 Box’s
x5 Box’s
x7 Box’s
x7 Box’s
x7 Box’s
x7 Box’s
x7 Box’s
x7 Box’s
x7 Box’s
x8 Box’s
x8 Box’s
x8 Box’s
x8 Box’s
x8 Box’s
x8 Box’s
x8 Box’s
x8 Box’s

How it Works

the Dynamic Grid Works Just Like the Standard one you create a row followed by columns with prefixed class box-#x1 in the code below you will see a grid of x5 Responsive Box’s on a Row Line.

<!-- Columns Wraper -->
<div class="row">
    <!-- Column Element -->
    <div class="box-5x1">
        x5 Box's in Desktop | x3 Box's in Tablet | x2 Box's in Mobile
    </div>
</div>

Classes List

the Dynamic Grid Available Classes and Their Response Breakpoints.

Class Name Desktop Tablets Large Phones Small Phones
box-5×1 x5 Box’s in a Row x3 Box’s in a Row x2 Box’s in a Row x1 Box’s in a Row
box-7×1 x7 Box’s in a Row x4 Box’s in a Row x2 Box’s in a Row x1 Box’s in a Row
box-8×1 x8 Box’s in a Row x4 Box’s in a Row x2 Box’s in a Row x1 Box’s in a Row
box-9×1 x9 Box’s in a Row x5 Box’s in a Row x3 Box’s in a Row x1 Box’s in a Row
box-10×1 x10 Box’s in a Row x5 Box’s in a Row x3 Box’s in a Row x1 Box’s in a Row
box-11×1 x11 Box’s in a Row x5 Box’s in a Row x3 Box’s in a Row x1 Box’s in a Row

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