Reflowing columns (CSS Multi-column)

_reflowing-columns.scss

/**
 * Reflowing columns (CSS Multi-column)
 *
 * This defines reflowing columns in CSS. Simply apply the class with the number
 * of columns you need, like .reflow-3 . The number of columns wil be reduced if
 * the individual columns go below $min-column-width.
 *
 * IE10+ only, all but Firefox have trouble displaying <li>s inside the columns.
 *
 * @author Alain Schlesser <alain.schlesser@gmail.com>
 *
 * @see https://css-tricks.com/guide-responsive-friendly-css-columns/
 * @see http://caniuse.com/#feat=multicolumn
 */

// Configuration
// These will probably be set elsewhere, i.e. _variables.scss
$min-column-width: 400px;
$padding-unit: 40px;

// Loop from 2 to 8 to generate multiple classes. Adapt as necessary
@for $column-index from 2 through 8 {

    .reflow-#{$column-index} {

        columns: $column-index $min-column-width;
        column-gap: $padding-unit;
    }
}