@curiousmedia/grid-calc

Grid-calc

CSS rows and columns using calc and Flexbox or display-inline. This library does not use CSS Grid layout. Columns use calc instead of padding for column gutters.

Example

4 columns

ul {
    @include grid-calc(4);
}

3 columns with 10px gutters

ul {
    @include grid-calc(3, 10px);
}

Centered columns

ul {
    @include grid-calc(3, 0, true);
}

Display-inline fallback

For browsers that do not support flexbox.

ul {
    @include grid-calc(3, 0, false, true);
}