column-count: 3;
    column-gap: 1rem;
    column-fill: balance; /* auto will break in Firefox */
}
.child {
    /* Avoids children getting stuck between column  */
    break-inside: avoid;
    /* For the bug that causes gap on top of columns sometimes */
    display: inline-block;
}```

And incase you wished to change the number of columns based on the width, you can do that as well:

```.parent {
    column-gap: 1rem;
    column-fill: balance;
    column-count: 1;
    @media screen and (min-width: 640px) {
        column-count: 2;
    }
    @media screen and (min-width: 1024px) {
        column-count: 3;
    }
}```

You can see this approach in action at Indrashish Ghosh’s [awesome collection of podcasts.](http://ghosh.github.io/awesome-podcasts/)

## Limitations

CSS columns is not supported in IE 9 and below, therefore you need to go with the jQuery plugin approach. Also, as of now, it’s highly recommended that you use these properties with vendor prefixes.