Flexbox grid

A flex-based CSS grid system according to the BEM standard

Using SASS

  • With Bower

    bower install flexbox-grid-sass
  • With NPM

    npm install flexbox-grid-sass

Using LESS

  • With Bower

    bower install flexbox-grid-less
  • With NPM

    npm install flexbox-grid-less

Using Stylus

  • With Bower

    bower install flexbox-grid-stylus
  • With NPM

    npm install flexbox-grid-stylus

Individual sizing

It is possible to size the columns individually
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm-1">
            ...
        </div>
        <div class="col col--sm-2">
            ...
        </div>
        <div class="col col--sm-3">
            ...
        </div>
        <div class="col col--sm-4">
            ...
        </div>
        ...
    </div>
</div>

Auto sizing

According how many items there are displayed, flexbox will automatically compute the desired width
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        ...
    </div>
</div>

Offset

It is possible to add offset to the columns
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm-1 col--sm-offset-11">
            ...
        </div>
        <div class="col col--sm-2 col--sm-offset-10">
            ...
        </div>
        <div class="col col--sm-3 col--sm-offset-9">
            ...
        </div>
        ...
    </div>
</div>

Combining

It is possible to combine. Flexbox will automatically fill up the space
col--sm-2
col--sm
col--sm-3
col--sm-offset-1
col--sm
col--sm-offset-1
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm-2">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm-3 col--sm-offset-1">
            ...
        </div>
        <div class="col col--sm col--sm-offset-1">
            ...
        </div>
        ...
    </div>
</div>

grid in a grid

grid components are infinitely nestable inside of other grid components
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm">
            <div class="col col--sm">
                <div class="col col--sm">
                    ...
                </div>
            </div>
        </div>
        ...
    </div>
</div>

Full width

It is possible to make the grid full width
<div class="grid">
    <div class="row">
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        ...
    </div>
</div>

Responsive

The content can be displayed on multiple devices
<div class="grid grid--container">
    <div class="row">
        <div class="col col--xs-2 col--md-4 col--lg-9 col--xl-10">
            ...
        </div>
        <div class="col col--xs-10 col--md-8 col--lg-3 col--xl-2">
            ...
        </div>
        ...
    </div>
</div>

Flexible columns

It is possible to make the columns flexible

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm col--sm-flex">
            ...
        </div>
        <div class="col col--sm col--sm-flex">
            ...
        </div>
        <div class="col col--sm col--sm-flex">
            ...
        </div>
        ...
    </div>
</div>

Top alignment

It is possible to align the columns at the top

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

<div class="grid grid--container">
    <div class="row row--sm-top">
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        ...
    </div>
</div>

Center alignment

It is possible to align the columns at the center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

<div class="grid grid--container">
    <div class="row row--sm-center">
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        ...
    </div>
</div>

Bottom alignment

It is possible to align the columns at the bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

<div class="grid grid--container">
    <div class="row row--sm-bottom">
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        ...
    </div>
</div>

Individual Alignment

It is possible to align the columns individually

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eligendi illo impedit placeat provident quod ut. Atque distinctio illo quisquam. Ab cupiditate distinctio, doloremque itaque laudantium maiores quibusdam reiciendis veritatis.

A ad aliquid asperiores aut culpa dicta eaque expedita hic ipsa ipsam libero maiores minima nisi nobis perferendis quasi quis repudiandae, sint totam voluptatibus. Blanditiis iure natus perferendis voluptatem voluptatum?

<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm col--sm-align-top">
            ...
        </div>
        <div class="col col--sm col--sm-align-middle">
            ...
        </div>
        <div class="col col--sm col--sm-align-bottom">
            ...
        </div>
        ...
    </div>
</div>

Send column to start

It is possible to send a column to the start
1
2
3
4
5
6
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm col--sm-first">
            ...
        </div>
        ...
    </div>
</div>

Send column to end

It is possible to send a column to the end
1
2
3
4
5
6
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm col--sm-last">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        ...
    </div>
</div>

Reversing the columns

It is possible to reverse the columns
1
2
3
4
5
6
<div class="grid grid--container">
    <div class="row row--sm-reverse">
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        <div class="col col--sm">
            ...
        </div>
        ...
    </div>
</div>

No gutters

The content can be displayed without the gutters
5
4
3
<div class="grid grid--container grid--no-gutters">
    <div class="row row--no-gutters">
        <div class="col col--sm col--sm-no-gutters">
            ...
        </div>
        <div class="col col--sm col--sm-no-gutters">
            ...
        </div>
        <div class="col col--sm col--sm-no-gutters">
            ...
        </div>
        ...
    </div>
</div>

text Alignment

It is possible to align the text accordingly
5
4
3
<div class="grid grid--container">
    <div class="row">
        <div class="col col--sm text--xs-center text--sm-left">
            ...
        </div>
        <div class="col col--sm text--xs-center text--sm-center">
            ...
        </div>
        <div class="col col--sm text--xs-center text--sm-right">
            ...
        </div>
        ...
    </div>
</div>