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