<?php
if (!defined('CSSM_VERSION')) {
    die('-1');
}
?>
<div id="vmutc_gridstack_layoutContainer" class="vmutc_widgetWindow">
    <div class="">
        <span class="vmutc_info"><?php echo _e('Simply click on the columns layout you want to use.' , 'css-magician'); ?></span><br>
        <span class="vmutc_info"><?php echo _e('It will be possible to update it exactly as you want in the Grid Editor.' , 'css-magician'); ?></span><br>
        <ul class="gridstack_layout_ul">
            <li class="gridstack_layout_li" data-layout="12">
                <span class="gridstack_layout_column" style="width: 100%;"></span>
            </li>
            <li class="gridstack_layout_li" data-layout="6_6">
                <span class="gridstack_layout_column" style="width: 50%;"></span>
                <span class="gridstack_layout_column" style="width: 50%;"></span>
            </li>
            <li class="gridstack_layout_li" data-layout="4_4_4">
                <span class="gridstack_layout_column" style="width: 33%;"></span>
                <span class="gridstack_layout_column" style="width: 33%;"></span>
                <span class="gridstack_layout_column" style="width: 33%;"></span>
            </li>

            <li class="gridstack_layout_li" data-layout="3_3_3_3">
                <span class="gridstack_layout_column" style=" width: 25%;"></span>
                <span class="gridstack_layout_column" style="width: 25%;"></span>
                <span class="gridstack_layout_column" style="width: 25%;"></span>
                <span class="gridstack_layout_column" style="width: 25%;"></span>
            </li>
            <li class="gridstack_layout_li" data-layout="2_2_2_2_2_2">
                <span class="gridstack_layout_column" style=" width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
            </li>

            <li class="gridstack_layout_li" data-layout="2_10">
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 80%;"></span>
            </li>
            <li class="gridstack_layout_li" data-layout="10_2">
                <span class="gridstack_layout_column" style="width: 80%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
            </li>
            <li class="gridstack_layout_li" data-layout="3_6_3">
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 60%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>            
            </li>

            <li class="gridstack_layout_li" data-layout="4_8">
                <span class="gridstack_layout_column" style="width: 40%;"></span>
                <span class="gridstack_layout_column" style="width: 60%;"></span>
            </li>
            <li class="gridstack_layout_li" data-layout="8_4">
                <span class="gridstack_layout_column" style="width: 60%;"></span>
                <span class="gridstack_layout_column" style="width: 40%;"></span>
            </li>
            <li class="gridstack_layout_li" data-layout="5_2_5">
                <span class="gridstack_layout_column" style="width: 40%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 40%;"></span>            
            </li>

            <li class="gridstack_layout_li" data-layout="2_2_8">
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 60%;"></span>            
            </li>
            <li class="gridstack_layout_li" data-layout="8_2_2">
                <span class="gridstack_layout_column" style="width: 60%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>            
            </li>
            <li class="gridstack_layout_li" data-layout="2_2_4_2_2">
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span>
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span>
                <span class="gridstack_layout_column" style="width: 33%;"></span>
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span> 
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span>            
            </li>
            <li class="gridstack_layout_li" data-layout="2_2_2_6">
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>  
                <span class="gridstack_layout_column" style="width: 40%;"></span>            
            </li>
            <li class="gridstack_layout_li" data-layout="6_2_2_2">
                <span class="gridstack_layout_column" style="width: 40%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>
                <span class="gridstack_layout_column" style="width: 20%;"></span>  
                <span class="gridstack_layout_column" style="width: 20%;"></span>            
            </li>
            <li class="gridstack_layout_li" data-layout="4_4_2_2">
                <span class="gridstack_layout_column" style="width: 33%;"></span>
                <span class="gridstack_layout_column" style="width: 33%;"></span>
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span>  
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span>            
            </li>
            <li class="gridstack_layout_li" data-layout="2_2_4_4">
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span>
                <span class="gridstack_layout_column" style="width: 16.6667%;"></span>
                <span class="gridstack_layout_column" style="width: 33%;"></span>  
                <span class="gridstack_layout_column" style="width: 33%;"></span>            
            </li>

        </ul>
    </div>
</div>