Responsive CSS3 Columns with Sass and Bootstrap

By · Published · howto, css, css3, html

Impatient? Scroll to the bottom to download.

So I recently was working on a site and wanted to use CSS3 columns. But I really like how the grid system works in Bootstrap, and wanted to be able to define columns in a similar way (i.e. have different number of columns depending on the screen size). Not finding any pre-cooked versions, I decided to write my own.

Strictly speaking, you don't need Bootstrap for this to work. But I did re-use Bootstrap's grid variables so that it breaks along the same lines that Bootstrap's grid does. It's also worth noting that, natively, the columns will collapse on their own if you specify a width. This method just gives you a bit more control.

@mixin column($count) {
    -webkit-column-gap: $grid-gutter-width;
    -moz-column-gap: $grid-gutter-width;
    column-gap: $grid-gutter-width;

    padding: 0 ($grid-gutter-width / 2) 0 ($grid-gutter-width / 2);

    -webkit-columns: auto #{$count};
    -moz-columns: auto #{$count};
    columns: auto #{$count};
}

@media (max-width: $screen-sm-min) {
    @for $i from 1 through $grid-columns {
        .column-xs-#{$i} {
            @include column($i);
        }
    }
}

@media (min-width: $screen-sm-min) {
    @for $i from 1 through $grid-columns {
        .column-sm-#{$i} {
            @include column($i);
        }
    }
}

@media (min-width: $screen-md-min) {
    @for $i from 1 through $grid-columns {
        .column-md-#{$i} {
            @include column($i);
        }
    }
}

@media (min-width: $screen-lg-min) {
    @for $i from 1 through $grid-columns {
        .column-lg-#{$i} {
            @include column($i);
        }
    }
}
Now, you can do something like this:

<div class="column-xs-1 column-sm-2 column-md-3 column-lg-4">
    Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
</div>
And it will collapse appropriately. You can see it in action on this JSFiddle.

The original release weighed in at roughly 12k compressed. I trimmed some of the fat off it. The current version weighs in at 7.6kb minified, which is about as small as it can get until those properties have no prefixes. If you want, though, you could use the mixin and the media queries to only generate the selectors you actually need. That would trim the file down to a ridiculously small size.

You can download a zip file containing the source SCSS, standard CSS and minified CSS for the full 12-column layout supporting all bootstrap break points, below. No license. Consider it public domain.

( Comments )

Did something I wrote help you out?

That's great! I don't earn any money from this site - I run no ads, sell no products and participate in no affiliate programs. I do this solely because it's fun; I enjoy writing and sharing what I learn.

All the same, if you found this article helpful and want to show your appreciation, here's my Amazon.com wishlist.


Related Posts

Extending ngResource To Access Metadata

Creating a simple predicate builder with AngularJS


comments powered by Disqus