Mirotone supports .grid. it is based on 12 column grid-template-columns. Each of the 12 cells are using the fr (fractional unit).

How to use

You can create your own grid html element or add a class .grid to the wrapper you want to create the grid layout. Then you should declare start and values for each of your columns to create the layout. The grid uses the Fluidigrid logic and comes with pre-declared naming convention, we use cs[n] for grid-column-start:[n] andce[n] for grid-column-end:[n].

The grid system is part of the foundation-core, and it is highly recommended when creating App layouts.

For example, if you want to declare a column which starts from the first to the last column you will declare:


<div class="cs1 ce12"></div>
cs1 ce2
cs3 ce7
cs8 ce10
cs11 ce12
cs1 ce8
cs9 ce12
cs1 ce5
cs6 ce12
cs1 ce3
cs4 ce6
cs7 ce9
cs10 ce12

Check App template