Flexbox-grid-helper

Simple and useful mixins to make flex grids in Sass. A DRY way to achieve a basic layout I usually need in many projects.

It aims to achieve the common minimum that I usually need for a grid of cards, using flexbox.

It's supposed to be used with autoprefixer, a postcss plugin.

How to install

You can clone this project, or use npm:

npm install flexbox-grid-helper

How to use

• import the _flexbox-grid-helper.scss file, inside dist folder, into your project
• use the provided mixins in the flex container to generate the styles

Examples

Given the below html:

<ul>
  <li>
    <div class="inner"></div>
  </li>
  <li>
    <div class="inner"></div>
  </li>
  <li>
    <div class="inner"></div>
  </li>
  <li>
    <div class="inner"></div>
  </li>
  <li>
    <div class="inner"></div>
  </li>
  <li>
    <div class="inner"></div>
  </li>
  <li>
    <div class="inner"></div>
  </li>
  <li>
    <div class="inner"></div>
  </li>
</ul>

Example 1

ul {
  @include flex-grid();
}

This will generate the layout with all the defaults, provided by the sass variables. Like so:

The size of the blocks and background-color are not added by the mixin.

Example 2

ul {
  @include flex-grid(2, 5px);
}

A grid with two columns and 5px of margin between blocks.

Example 3

@include flex-grid-cols(20px);

A grid with column direction and a 20px margin between blocks.

Example 4

Making a responsive grid is also very easy. Given the html above, you can put this code inside the flex container:

@include flex-grid(6, 2px);

@media (max-width: 600px) {
  li {
    flex-basis: flex-calc-size(2);
  }
}

A grid with 6 columns and 2px margin, that becomes 2 columns in <= 600px screen size.

More examples will be added soon