Skip to content

Instantly share code, notes, and snippets.

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 <>
* @see
* @see
// 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.