/* g-grid frame system from https://zellwk.com/blog/responsive-grid-system/ 
Div class="g-grid contaner"
    Div class="g6-row"
        Div class="g6-col-(1-6)"
    
*/
 :root { 
        --column-margin: 2px;
      /*  --row-margin:4px; */
}

 /*.g-grid-container:before,
 .g-grid-container:after,{ box-sizing: inherit;}
 */
 .g-grid-split-container:{
 
            box-sizing: border-box;  
             max-width: 345px;
            margin-right: auto;
            margin-left: auto;
 }
 .g520-grid-container:{
 
            box-sizing: border-box;  
             max-width: 520px;
            margin-right: auto;
            margin-left: auto;
 }
.g-grid-container:{
 
            box-sizing: border-box;  
             max-width: 750px;
            margin-right: auto;
            margin-left: auto;
 }

    /*-- our cleafix hack -- */ 
.g-row:after {
             content:"";
             clear:both;
             display: table ;  
}             
.g-row { 
             margin-top:calc(var(--column-margin)*2);  
               
}
.g6-col-1 {
        width:calc((100%*1/6) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g6-col-2 {
        width:calc((100%*2/6) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left:  var(--column-margin);
        float: left; 
        }
.g6-col-3 {
        width:calc((100%*3/6) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g6-col-4 {
        width:calc((100%*4/6) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g6-col-5 {
        width:calc((100%*5/6) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g6-col-6 {
        width:calc(100% - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }

.g6p-col-1 {
        width:calc(100%*1/6);
        padding-right: 0px;
        padding-left: 0px;
        float: left; 
        }
.g6p-col-2 {
        width:percentage(100%*2/6);
        padding-right: 0px;
        padding-left: 0px;
        float: left; 
        }
.g6p-col-3 {
        width:percentage(100%*3/6);
        padding-right: 0px;
        padding-left: 0px;
        float: left; 
        }
.g6p-col-4 {
        width:percentage(100%*4/6);
        padding-right: 0px;
        padding-left: 0px;
        float: left; 
        }
.g6p-col-5 {
        width:percentage(100%*5/6);
        padding-right: 0px;
        padding-left: 0px;
        float: left; 
        }
.g6p-col-6 {
        width:percentage(100%*6/6);
        padding-right: 0px;
        padding-left: 0px;
        float: left; 
        }
 /* ******************** 12 columns******************************************************* */       
.g12-col-1 {
        width:calc((100%*1/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-2 {
        width:calc((100%*2/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left:  var(--column-margin);
        float: left; 
        }
.g12-col-3 {
        width:calc((100%*3/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-4 {
        width:calc((100%*4/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-5 {
        width:calc((100%*5/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-6 {
        width:calc((100%*6/12)- ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-7 {
        width:calc((100%*7/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-8 {
        width:calc((100%*8/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left:  var(--column-margin);
        float: left; 
        }
.g12-col-9 {
        width:calc((100%*9/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-10 {
        width:calc((100%*10/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-11 {
        width:calc((100%*1/12) - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }
.g12-col-12 {
        width:calc(100% - ( var(--column-margin)*2));
        margin-right: var(--column-margin);
        margin-left: var(--column-margin);
        float: left; 
        }       
        
.column {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  text-align: center;
  background: red;
}