JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<script src="http://cargocollective.com/_jsapps/_libs/cargo_plugins/columnizer.js"></script>
Resize this panel to see the Columnizer in action.

<div class="container" data-columnize=".thumbnail" data-columnize-width="200" data-columnize-fluid="true" >
    <div class="thumbnail"><img src="http://payload172.cargocollective.com/1/12/394686/5753877/Gerome-Black_Bashi-Bazouk-c_1869.jpg" /></div>
    <div class="thumbnail"><img src="http://payload172.cargocollective.com/1/12/394686/5753877/Gerome-Black_Bashi-Bazouk-c_1869.jpg" /></div>
    <div class="thumbnail"><img src="http://payload172.cargocollective.com/1/12/394686/5753877/Gerome-Black_Bashi-Bazouk-c_1869.jpg" /></div>
    <div class="thumbnail"><img src="http://payload172.cargocollective.com/1/12/394686/5753877/Gerome-Black_Bashi-Bazouk-c_1869.jpg" /></div>
    <div class="thumbnail"><img src="http://payload172.cargocollective.com/1/12/394686/5753877/Gerome-Black_Bashi-Bazouk-c_1869.jpg" /></div>
    <div class="thumbnail"><img src="http://payload172.cargocollective.com/1/12/394686/5753877/Gerome-Black_Bashi-Bazouk-c_1869.jpg" /></div>
</div>

CSS

/* everything in here is not required to make the plugin work. */
body {
   margin: 0;
   font-family: sans-serif;
   font-size: 14px;
   text-align: center;
}

/* hide the element until the the plugin has been loaded so you won't see jumping */
[data-columnize] {
    visibility: hidden;
}

/* everything in here is not required to make the plugin work. */
.container {
    min-width: 500px;
    padding: 0px 20px;
    margin-top: 40px;
}

.thumbnail {
    /* these properties are neccesary to make the plugin work */
    display: inline-block;
    vertical-align: top;
    width: 100%;
    font-size: 0;
    
    /* these are not */
    padding: 0px 20px;
    margin-bottom: 20px;
}

/* this is to make images scale properly inside a columnized element */
.thumbnail img {
    max-width: 100%; /* make sure they don't grow larger than their original size */
    height: auto;
    margin: 0 auto; /* center the image in case it's smaller than the column width. */
}

JavaScript

// see the 'External Resources' tab for the link to the JS file you can include in your design.