A small flexbox based grid system.
- 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: 0;
}