JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<div class="wrap">
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet.</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendusAd quis repellat repellendus Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quis repellat repellendus distinctio ipsa hic optio praesentium sapiente tenetur quia cumque quos aliquam quas voluptate odio dolorem et veniam fugiat!</section>
</div>

SCSS

body {
  background-color: #efefef;
}
.wrap {
  overflow: hidden;
  padding: 20px;
}
section {
  @include box-shadow(rgba(#000, 0.5) 0 0 5px);
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
}

@media (min-width: 600px) {
  section {
    float: left;
    margin-right: 2%;
    padding: 20px 2%;
    width: 45%;
  
    &:nth-child(2n) {
      margin-right: 0;
    }
  }
}

@media (min-width: 900px) {
  section {
    width: 28%;
  
    &:nth-child(2n) {
      margin-right: 2%;
    }
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}

@media (min-width: 1200px) {
  section {
    width: 19.5%;
  
    &:nth-child(3n) {
      margin-right: 2%;
    }
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}

JavaScript

console.clear();

'use strict';

function Aequus($elem, targetSelector) {
    this.$elem = $elem;
    this.targetSelector = targetSelector;
    this.setup();
    return this;
}
Aequus.prototype.setup = function() {
    var self = this;
    window.addEventListener('resize', function(e) {
        self.handleResize(e);
    });
    return this;
}
Aequus.prototype.toArray = function(nodelist) {
    var array = [];
    // iterate backwards ensuring that length is an UInt32
    for (var i = nodelist.length >>> 0; i--;) { 
        array[i] = nodelist[i];
    }
    return array;
}
Aequus.prototype.handleResize = function(e) {
    var columns = this.getColumns(),
        targets = this.toArray(this.$elem.querySelectorAll(this.targetSelector)),
        i = 0,
        j = 0;
    
    for(i;i<targets.length;i += 1) {
        targets[i].style.minHeight = 0;
    }
    
    if(columns > 1) {
        for(j; j < Math.ceil(targets.length / columns); j += 1) {
            this.applyHeights(targets.slice(columns * j, (columns * j) + columns));
        }
    }
}
Aequus.prototype.applyHeights = function(elements) {
    var height = -1,
        i = 0;
    
    for(i;i<elements.length;i+=1) {
        if(elements[i].clientHeight > height) {
            height = elements[i].clientHeight;
        }
    }
    for(i=0;i<elements.length;i+=1) {
        elements[i].style.minHeight = height + 'px';
    }   
}    
Aequus.prototype.getColumns = function() {
    var targets = this.$elem.querySelectorAll(this.targetSelector),
        offset = -1,
        columns = 0,
        currentOffset;
    
    for(columns; columns < targets.length; columns += 1) {
        currentOffset = targets[columns].offsetTop;
        
        if(currentOffset > offset && offset !== -1) {
            return columns;
        }
        
        offset = currentOffset;
    }
    
    return columns;
}

var wrap = document.querySelectorAll('.wrap')[0],
    aeq = new Aequus(wrap, 'section');