JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="listing">
    <article>
        <figure>
            <img src="http://www.kenwatanabe.info/media/01.jpg" />
            <figcaption>caption</figcaption>
        </figure>
    </article>
    <article>Aliquam vel velit nec dolor lacinia fermentum. Nulla dapibus rutrum cursus.</article>
    <article>Nam nec dolor felis, in porta felis. Vestibulum in magna in est molestie ultrices at et eros.</article>
    <article>Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet. Curabitur pellentesque consectetur ornare. Pellentesque vel euismod odio.</article>
    <article>Aliquam erat volutpat. Praesent adipiscing consectetur mattis.</article>
    <article>Vivamus consequat imperdiet dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</article>
    <article>Nulla tempus pharetra nulla. In justo dolor, sollicitudin nec commodo sit amet, adipiscing eget lectus.</article>
    <article>Nulla nec nisl massa, id imperdiet justo. Nunc sapien nulla, faucibus et posuere quis, posuere non erat.</article>
    <article>Integer elementum metus est, rutrum tempor quam. Aliquam molestie faucibus justo in lobortis.</article>
    <article>Phasellus velit enim, tempus et lobortis eget, rhoncus nec dolor. Proin sollicitudin velit nec est rutrum fermentum. Nam mauris dolor, faucibus id vestibulum non, vulputate quis erat.</article>
    <article>Praesent aliquam molestie rhoncus. Praesent ut orci sed felis imperdiet porttitor sed et dui. Pellentesque vitae arcu nec diam condimentum viverra eget in tortor.</article>
    <article>Integer fermentum lobortis ligula, eget tincidunt lectus ornare ullamcorper. Nam vitae felis turpis. Aliquam volutpat tempus pretium. Vestibulum luctus pharetra aliquet.</article>
</div>

CSS

figure img{ height:200px; width:auto; }

div.listing {
  @include columns(15em);
  @include column-gap(1em);
}

div.listing article {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid; /* Firefox is dumb */
  break-inside: avoid;
}

/* pretty it up! */

div.listing article {
  @include border-radius(.5em);
  margin: 1em 0;
  background-color: #CCC;
  padding: .5em;
}

div.listing article:first-child {
  margin-top: 0;
}

div.listing article:nth-child(odd) {
  background-color: lighten(yellow, 30%);
}