Less Flex grid system

flexgrid.less

/**
 * This flexible grid system is based on percentage of columns
 * e.g. fgu3 (3 grid units) is 3/columns percent in a 800px wide container thats 800*.03 = 24px
 * 
 * So its always known that fguX is X percent of the container.
 * Nested units get a bit more complicated.
 * 
 * Up to 100 columns is possible 
 */

// setup a default
@default_columns : 12;
@default_gutter: 0.5;
@default_main_content_width : 100%; // my_artfire main content width

// default grid
.flexgrid, .flexgrid12{
    .flexgrid(@default_columns, @default_main_content_width, @default_gutter);
}

.flexgrid(@columns, @main_content_width, @gutter){
      width: @main_content_width;
      clear: both;
      overflow: hidden;
      max-width: 1140px;
        
      &:before{
          content: "";
      }



    

    .flex_grid_unit(@width){
        min-height: (@gutter - @gutter/@columns)*1em;
        // figure out the width of the column
        @wide: (100%*(@width/@columns) - (@gutter - @gutter/(@columns - 1)) - 0.01);
        width: @wide !important;
        margin-right: 1%*@gutter;
        float: left;
        box-sizing: border-box;
        margin-bottom: 5px;
        min-height: 1px;
        // just for testing purposes
        &.pink{ background: rgba(244, 215, 235, 0.4); border: 1px solid darken(rgb(244, 215, 235),15%);}
        &.l_margin_auto{ display: block; float: none; margin: 0 auto;}
    }

    & *:last-child{ margin-right: 0 !important;}


    .fgu1{.flex_grid_unit(1)}
    .fgu2{.flex_grid_unit(2)}
    .fgu3{.flex_grid_unit(3)}
    .fgu4{.flex_grid_unit(4)}
    .fgu5{.flex_grid_unit(5)}
    .fgu6{.flex_grid_unit(6)}
    .fgu7{.flex_grid_unit(7)}
    .fgu8{.flex_grid_unit(8)}
    .fgu9{.flex_grid_unit(9)}
    .fgu10{.flex_grid_unit(10)}
    .fgu11{.flex_grid_unit(11)}
    .fgu12{.flex_grid_unit(12)}
    .fgu13{.flex_grid_unit(13)}
    .fgu14{.flex_grid_unit(14)}
    .fgu15{.flex_grid_unit(15)}
    .fgu16{.flex_grid_unit(16)}
    .fgu17{.flex_grid_unit(17)}
    .fgu18{.flex_grid_unit(18)}
    .fgu19{.flex_grid_unit(19)}
    .fgu20{.flex_grid_unit(20)}
    .fgu21{.flex_grid_unit(21)}
    .fgu22{.flex_grid_unit(22)}
    .fgu23{.flex_grid_unit(23)}
    .fgu24{.flex_grid_unit(24)}
    .fgu25{.flex_grid_unit(25)}
    .fgu26{.flex_grid_unit(26)}
    .fgu27{.flex_grid_unit(27)}
    .fgu28{.flex_grid_unit(28)}
    .fgu29{.flex_grid_unit(29)}
    .fgu30{.flex_grid_unit(30)}
    .fgu31{.flex_grid_unit(31)}
    .fgu32{.flex_grid_unit(32)}
    .fgu33{.flex_grid_unit(33)}
    .fgu34{.flex_grid_unit(34)}
    .fgu35{.flex_grid_unit(35)}
    .fgu36{.flex_grid_unit(36)}
    .fgu37{.flex_grid_unit(37)}
    .fgu38{.flex_grid_unit(38)}
    .fgu39{.flex_grid_unit(39)}
    .fgu40{.flex_grid_unit(40)}
    .fgu41{.flex_grid_unit(41)}
    .fgu42{.flex_grid_unit(42)}
    .fgu43{.flex_grid_unit(43)}
    .fgu44{.flex_grid_unit(44)}
    .fgu45{.flex_grid_unit(45)}
    .fgu46{.flex_grid_unit(46)}
    .fgu47{.flex_grid_unit(47)}
    .fgu48{.flex_grid_unit(48)}
    .fgu49{.flex_grid_unit(49)}
    .fgu50{.flex_grid_unit(50)}
    .fgu51{.flex_grid_unit(51)}
    .fgu52{.flex_grid_unit(52)}
    .fgu53{.flex_grid_unit(53)}
    .fgu54{.flex_grid_unit(54)}
    .fgu55{.flex_grid_unit(55)}
    .fgu56{.flex_grid_unit(56)}
    .fgu57{.flex_grid_unit(57)}
    .fgu58{.flex_grid_unit(58)}
    .fgu59{.flex_grid_unit(59)}
    .fgu60{.flex_grid_unit(60)}
    .fgu61{.flex_grid_unit(61)}
    .fgu62{.flex_grid_unit(62)}
    .fgu63{.flex_grid_unit(63)}
    .fgu64{.flex_grid_unit(64)}
    .fgu65{.flex_grid_unit(65)}
    .fgu66{.flex_grid_unit(66)}
    .fgu67{.flex_grid_unit(67)}
    .fgu68{.flex_grid_unit(68)}
    .fgu69{.flex_grid_unit(69)}
    .fgu70{.flex_grid_unit(70)}
    .fgu71{.flex_grid_unit(71)}
    .fgu72{.flex_grid_unit(72)}
    .fgu73{.flex_grid_unit(73)}
    .fgu74{.flex_grid_unit(74)}
    .fgu75{.flex_grid_unit(75)}
    .fgu76{.flex_grid_unit(76)}
    .fgu77{.flex_grid_unit(77)}
    .fgu78{.flex_grid_unit(78)}
    .fgu79{.flex_grid_unit(79)}
    .fgu80{.flex_grid_unit(80)}
    .fgu81{.flex_grid_unit(81)}
    .fgu82{.flex_grid_unit(82)}
    .fgu83{.flex_grid_unit(83)}
    .fgu84{.flex_grid_unit(84)}
    .fgu85{.flex_grid_unit(85)}
    .fgu86{.flex_grid_unit(86)}
    .fgu87{.flex_grid_unit(87)}
    .fgu88{.flex_grid_unit(88)}
    .fgu89{.flex_grid_unit(89)}
    .fgu90{.flex_grid_unit(90)}
    .fgu91{.flex_grid_unit(91)}
    .fgu92{.flex_grid_unit(92)}
    .fgu93{.flex_grid_unit(93)}
    .fgu94{.flex_grid_unit(94)}
    .fgu95{.flex_grid_unit(95)}
    .fgu96{.flex_grid_unit(96)}
    .fgu97{.flex_grid_unit(97)}
    .fgu98{.flex_grid_unit(98)}
    .fgu99{.flex_grid_unit(99)}
    .fgu100{.flex_grid_unit(100)}
}