JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div id="log-data"></div>


<div class="box-parent">

  <div class="box size1x1">1</div>
  <div class="box size2x1">2</div>
  <div class="box size1x1">3</div>
  <div class="box size1x1">4</div>
  <div class="box size1x2">5</div>
  <div class="box size2x1">6</div>
  <div class="box size2x1">7</div>
  <div class="box size1x2">8</div>
  <div class="box size1x1">9</div>
  <div class="box size1x1">10</div>
</div>

SCSS

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  font-family: sans-serif;
  font-size: 14px;
}

#log-data {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 3px;
  background: #000;
  color: #fff;
  opacity: .4;
}

.box-parent {
  position: relative;
  background: yellow;
}

.box {
  display: block;
  position: absolute;
  background: green;
  box-shadow: inset 0px 0px 5px 3px orange;
  color: #fff;
  &.size1x1 {
    width: 50px;
    height: 50px;
  }
  &.size2x1 {
    width: 100px;
    height: 50px;
  }
  &.size1x2 {
    width: 50px;
    height: 100px;
  }
}

JavaScript

var progressBox = function() {

  var logtemp = '';

  var $boxParent = $('.box-parent');
  var $box = $boxParent.find('.box');

  var bstyle;
  var pw = $boxParent.width();
  var cur = 0;
  var ph = 0;

  logtemp += '[parent:' + pw + ']<br/>';

  $box.each(function(i, b) {
    var $b = $(b);
    var w = $b.width();
    var h = $b.height();

    if (cur + w <= pw) {
      btop = ph;
      bleft = cur;
      cur = cur + w;
    } else {
      cur = 0;
      ph += 100;
      btop = ph;
      bleft = cur;
      cur = cur + w;
    }


    bstyle = 'top:' + btop + 'px;left:' + bleft + 'px;';
    $b.attr('style', bstyle);



    logtemp += '[i' + i + 'w' + w + 'h' + h + ']<br/>';
  });


  $('#log-data').html(logtemp);

};
$(window).on('resize', progressBox).trigger('resize');