Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reflowing columns (CSS Multi-column)
/**
* 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.