flx-grid

A small flexbox based grid system.

• Quick Start Guide
• Documentation

Features:

• 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)

Install

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

Requirements

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

Quick Start Guide

Default values:

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

Container

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;
}

Item

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;
}

Last

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: 0;
}