Dynamic Grid

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.

Why 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

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

Responsive Grid Example Code.

Class List

the Dynamic Grid Available Class and Their Response Breakpoints.

Class Name	Desktop	Tablets	Large Phones	Small Phones
box-5x1	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-7x1	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-8x1	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-9x1	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-10x1	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-11x1	x11 Box's in a Row	x5 Box's in a Row	x3 Box's in a Row	x1 Box's in a Row

Next Masonry Grid Previous Standard Grid