Grid

In a grid (grid), a usual division refers to a row (row). In Mont9 Editor, grid represents a row (row), and column means a column (col), and a column must always be placed within a grid. Mont9 Editor's grid system provides up to 6 columns.
Do not attempt to create more than 6 (it will make the source code too lengthy due to the excessive possibilities).

Introduction

In Mont9 Editor, the basic structure of all blocks follows the pattern: .m9-grid-block > .m9-grid-n > .m9-column-n.
.m9-grid-n and .m9-column-n should always be used together. For instance, if you want to divide into 4 columns, you can use .m9-grid-4 (Below, various column scenarios are explained).
When there are multiple columns, the first column needs m9-column-first, and the last column requires m9-column-last class.
The gap between columns can be adjusted using .m9-spacing-n class, which can be inserted into .m9-grid-n and adjusted from 0 to 2.
.m9-spacing-0, .m9-spacing-1, .m9-spacing-2
If you modify the grid structure, blocks may break.
If you use the editor, grids are generated automatically.

m9-grid-1

Result

m9-column-1

code

<div class="m9-grid-1"> 
    <div class="m9-column-1">
       m9-column-1
    </div>  
</div>

m9-grid-2

Result

m9-column-1

code

<div class="m9-grid-2"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

code

<div class="m9-grid-2"> 
    <div class="m9-column-2">
        m9-column-2
    </div> 
</div>

m9-grid-3

Result

m9-column-1

code

<div class="m9-grid-3"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

m9-column-1

code

<div class="m9-grid-3"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1 m9-column-last">
       m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

code

<div class="m9-grid-3"> 
    <div class="m9-column-1 m9-column-first">
       m9-column-1
    </div>
    <div class="m9-column-2 m9-column-last">
       m9-column-2
    </div>  
</div>

m9-grid-4

Result

m9-column-1

code

<div class="m9-grid-4"> 
    <div class="m9-column-1 m9-column-first">
       m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
       m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
       m9-column-1
    </div>  
</div>

Result

m9-column-2

m9-column-1

code

<div class="m9-grid-4"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
       m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

m9-column-1

code

<div class="m9-grid-4"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

code

<div class="m9-grid-4"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-1

m9-column-3

code

<div class="m9-grid-4"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-3 m9-column-last">
        m9-column-3
    </div>  
</div>

Result

m9-column-2

code

<div class="m9-grid-4"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-3

m9-column-1

code

<div class="m9-grid-4"> 
    <div class="m9-column-3 m9-column-first">
        m9-column-3
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-4

code

<div class="m9-grid-4"> 
    <div class="m9-column-4">
        m9-column-4
    </div>  
</div>

m9-grid-5

Result

m9-column-1

code

<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
       m9-column-1
    </div>
    <div class="m9-column-1">
       m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

m9-column-1

code

<div class="m9-grid-5"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

m9-column-1

code

<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

m9-column-1

code

<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

code

<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-2

m9-column-1

code

<div class="m9-grid-5"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

m9-column-1

m9-column-2

code

<div class="m9-grid-5"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-1

m9-column-2

code

<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-3

m9-column-1

code

<div class="m9-grid-5"> 
    <div class="m9-column-3 m9-column-first">
        m9-column-3
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-3

m9-column-1

code

   
<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-3">
        m9-column-3
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-3

code

<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-3 m9-column-last">
        m9-column-3
    </div>  
</div>

Result

m9-column-3

m9-column-2

code

<div class="m9-grid-5"> 
    <div class="m9-column-3 m9-column-first">
        m9-column-3
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-2

m9-column-3

code

<div class="m9-grid-5"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-3 m9-column-last">
        m9-column-3
    </div>  
</div>

Result

m9-column-1

m9-column-4

code

<div class="m9-grid-5"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-4 m9-column-last">
        m9-column-4
    </div>  
</div>

Result

m9-column-4

m9-column-1

code

<div class="m9-grid-5"> 
    <div class="m9-column-4 m9-column-first">
        m9-column-4
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-5

code

<div class="m9-grid-5"> 
    <div class="m9-column-5">
        m9-column-5
    </div>
</div>

m9-grid-6

Result

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>  
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-2

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-3

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-3 m9-column-first">
        m9-column-3
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-3

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-3">
        m9-column-3
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-3

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-3">
        m9-column-3
    </div>  
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-3

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-3 m9-column-last">
        m9-column-3
    </div>  
</div>

Result

m9-column-2

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

m9-column-1

m9-column-2

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>  
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

m9-column-1

m9-column-2

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>  
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-1

m9-column-4

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-4 m9-column-last">
        m9-column-4
    </div>  
</div>

Result

m9-column-1

m9-column-4

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-4">
        m9-column-4
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-4

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-4 m9-column-first">
        m9-column-4
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-2

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-1

m9-column-2

m9-column-3

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-3 m9-column-last">
        m9-column-3
    </div>  
</div>

Result

m9-column-1

m9-column-3

m9-column-2

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-3">
        m9-column-3
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-2

m9-column-1

m9-column-3

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-3 m9-column-last">
        m9-column-3
    </div>  
</div>

Result

m9-column-2

m9-column-3

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div>
    <div class="m9-column-3">
        m9-column-3
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-3

m9-column-1

m9-column-2

code

<div class="m9-grid-6"> 
    <div class="m9-column-3 m9-column-first">
        m9-column-3
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-3

m9-column-2

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-3 m9-column-first">
        m9-column-3
    </div>
    <div class="m9-column-2">
        m9-column-2
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-4

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-4 m9-column-last">
        m9-column-4
    </div>  
</div>

Result

m9-column-1

m9-column-4

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-4">
        m9-column-4
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-4

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-4 m9-column-first">
        m9-column-4
    </div>
    <div class="m9-column-1">
        m9-column-1
    </div>
    <div class="m9-column-1 m9-column-last">
       m9-column-1
    </div>  
</div>

Result

m9-column-5

m9-column-1

code

<div class="m9-grid-6"> 
    <div class="m9-column-5 m9-column-first">
        m9-column-5
    </div>
    <div class="m9-column-1 m9-column-last">
        m9-column-1
    </div>  
</div>

Result

m9-column-1

m9-column-5

code

<div class="m9-grid-6"> 
    <div class="m9-column-1 m9-column-first">
        m9-column-1
    </div>
    <div class="m9-column-5 m9-column-last">
        m9-column-5
    </div>  
</div>

Result

m9-column-2

m9-column-4

code

<div class="m9-grid-6"> 
    <div class="m9-column-2 m9-column-first">
        m9-column-2
    </div> 
    <div class="m9-column-4 m9-column-last">
        m9-column-4
    </div>  
</div>

Result

m9-column-4

m9-column-2

code

<div class="m9-grid-6"> 
    <div class="m9-column-4 m9-column-first">
        m9-column-4
    </div> 
    <div class="m9-column-2 m9-column-last">
        m9-column-2
    </div>  
</div>

Result

m9-column-3

code

<div class="m9-grid-6"> 
    <div class="m9-column-3 m9-column-first">
        m9-column-3
    </div> 
    <div class="m9-column-3 m9-column-last">
        m9-column-3
    </div>  
</div>

Result

m9-column-6

code

<div class="m9-grid-6"> 
    <div class="m9-column-6">
        m9-column-6
    </div>  
</div>