A small flexbox based grid system.

• Quick Start Guide
• Documentation

• grid mode (classical grid calculator, read the Quick Start)
• experimental mode (caution: safety not guaranteed - supports relative, fix & flexible item widths)
• "fancy" arguments
• nested grids
• variable flow directions
• scalable number of gird columns
• scalable gutter margins (vertical & horizontal)

bower install flx-grid
# or 
npm install flx-grid

• Sass 3.4 +
• flexbox support
• calc() support

• 12 columns per container
• 10px margin between each column

Include the flx-container mixin to your container element. Notice that, because of the nature of flexbox, every element that shall contain grid-elements, requires flx-container.

.container {
  @include flx-container;
}

Compiled CSS:

.container {
  box-sizing:     border-box;
  direction:      ltr;
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
}

Add flx-item to any element to define the number of columns it should span.

.item {
  @include flx-item(3);
}

Compiled CSS:

.item {
  flex-basis:     calc(25% - 7.5px);
  margin:         0px;
  margin-right:   10px;
  margin-bottom:  10px;
}

The last item in each row needs flx-last to reset the spacing margin.

.item.last {
  @include flx-last;
}

Compiled CSS:

.item.last {
  margin-right:   0px;
}