LESS to create the classes required for creating a flexi grid.
@fixedCols :5;
@fixedRows :2;
.boxXxn(@X:5, @Y:2){
//iterate from 5 down to 0 X
.boxXY(@indexX, @indexY) when (@indexX > 0) and (@indexY > 0){
.box@{indexX}x@{indexY}{
width:((100 / @fixedCols) * @indexX) * 1%;
height:((100/ @fixedRows) * @indexY) * 1%;
}
.boxXY(@indexX, @indexY - 1);
}
//iterate from 5 down to 0 X
.boxX(@indexX, @indexY) when (@indexX > 0) and (@indexY > 0){
.boxXY(@indexX, @indexY);
.boxX(@indexX - 1, @indexY);
}
.boxX(@X, @Y);
}
.boxXxn(@fixedCols, @fixedRows);
.box-outline{
outline:dotted 1px @app-black;
float: left;
}