Less Utility to quickly generate precise liquid and px perfed grid layouts

EXAMPLE in example folder at http://htmlpreview.github.io/?https://github.com/andresgallo/FlexGrid/blob/master/example/index.html

To use FlexGrid first import Flexgrid into yourproject

  @import (reference) 'FlexGrid';
  @import (reference) 'FlexGridFlickityPlugin' // add this one also if using flickety carousel in some of the grids

One imported just use .FlexGridMakeSizes mixin wherever you need a custom grid layout. This may be done for specific breakpoints or globally.

.GridContainer {
    .FlexGridMakeSizes(@margin: 20px, @width: 25%);
}

.GridContainer {
    .FlexGridMakeSizes(@margin: 20px 10px, @width: 50%);
}

.GridContainer {
    .FlexGridMakeSizes(@margin: 0px, @width: 300px);
}

.GridContainer {
    .FlexGridMakeSizes(@margin: 10px, @flexSpaces: 2 3, @width: 33.33%); 
}

@sibling: (defaults to ~'> *') In some cases such as when using in combination with carousel scripts, HTML markup may be inserted inbetween the grid container and the items... In those cases the default selector will not be able to correctly pick the children. In that case you can explicitly pass the a selector to identify these children items.

@flexSpaces: (defaults to 1 2 3 4 5 6) Mixin will enable the grid to use flexSpaces. Using [data-flexspace=n] where n is a number allows you to tell specific items to span multiple columns