Layout de cartelas

_play.json

{}

markup.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div class="column">
  <div class="wrapper">
    <div class="issue">
      <div class="top">
        <div class="id">OBJ-1234</div>
        <div class="icons">
          <img src="https://image.freepik.com/free-icon/little-wrench-tool_318-25355.png"/>
          <img src="http://www.inkace.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/u/m/umbrella-corp-logo.png"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
        </div>
      </div>
      <div class="title-box">  
        <div class="title">Tarefa muito importante para alguém</div>
      </div>
    </div>
  </div>
  <div class="wrapper">
    <div class="issue">
      <div class="top">
        <div class="id">OBJ-1234</div>
        <div class="icons">
          <img src="https://image.freepik.com/free-icon/little-wrench-tool_318-25355.png"/>
          <img src="http://www.inkace.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/u/m/umbrella-corp-logo.png"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
        </div>
      </div>
      <div class="title-box">  
        <div class="title">Tarefa muito importante para alguém</div>
      </div>
    </div>
  </div>
  <div class="wrapper">
    <div class="issue">
      <div class="top">
        <div class="id">OBJ-1234</div>
        <div class="icons">
          <img src="https://image.freepik.com/free-icon/little-wrench-tool_318-25355.png"/>
          <img src="http://www.inkace.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/u/m/umbrella-corp-logo.png"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
        </div>
      </div>
      <div class="title-box">
        <div class="title">Tarefa muito importante para alguém</div>
      </div>
    </div>
  </div>
  <div class="wrapper">
    <div class="issue">
      <div class="top">
        <div class="id">OBJ-1234</div>
        <div class="icons">
          <img src="https://image.freepik.com/free-icon/little-wrench-tool_318-25355.png"/>
          <img src="http://www.inkace.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/u/m/umbrella-corp-logo.png"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
          <img src="http://www.gravatar.com/avatar/c4db9c179216bbcf04a5d1525fb8addd.jpg?d=mm&s=25"/>
        </div>
      </div>
      <div class="title-box">
        <div class="title">Tarefa muito importante para alguém</div>
      </div>
    </div>
  </div>
</div>
<script>
$(x);
$(window).resize(x);
</script>

script.js

var x = function() {
  $('.column').toggleClass('tiny', $('.column').width() <= 180);
  $('.wrapper').each(function() {
    var w = $(this).parent().width();
    var cols = parseInt(w / 180);
    var children = $(this).parent().children().length;
    if (cols <= children) {
      if (w > 180) {
        $(this).css('width', 'calc(100% / ' + Math.min(cols, children) + ')');
      } else {    
        $(this).css('width', '104px');
      }
    } else {
      $(this).css('width', '');
    }
  });
}

style.css

.column {
    width: 100%;
    background: yellow;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.column.tiny {
    justify-content: center;
}

.wrapper {
    box-sizing: border-box;
    padding: 2px;
}

.issue {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    background: white;
    height: 50px;
    overflow: hidden;
}

.wrapper.col1 {
    width: 100%;
}

.wrapper.col2 {
    width: 50%;
}

.wrapper.col3 {
    width: calc(100%/3);
}

.wrapper.col4 {
    width: calc(100%/4);
}

img {
    width: 25px;
    height: 25px;
}

.top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.icons {
    display: flex;
    flex-direction: row;
}

.id {
    flex: 1;
    min-width: 76px;
    white-space: nowrap;
    line-height: 25px;
}

.column.tiny .id {
    text-align: center;
}
.title-box {
    height: 25px;
    position: relative;
    margin: 0 5px;
    overflow: hidden;
}

.title {
    position: absolute;
    white-space: nowrap;
}