Layout Builder

Layout Builder by Champ.

by Dhruvang Gajjar

HTML

<div class="post-listing">
  <div class="post-item">A</div>
  <div class="post-item">B</div>
  <div class="post-item">C</div>
  <div class="post-item">D</div>
  <div class="post-item">E</div>
  <div class="post-item">F</div>
  <div class="post-item">G</div>
  <div class="post-item">H</div>
  <div class="post-item">I</div>
  <div class="post-item">J</div>
  <div class="post-item">K</div>
  <div class="post-item">L</div>
  <div class="post-item">M</div>
  <div class="post-item">N</div>
  <div class="post-item">O</div>
  <div class="post-item">P</div>
  <div class="post-item">Q</div>
  <div class="post-item">R</div>
  <div class="post-item">S</div>
  <div class="post-item">T</div>
  <div class="post-item">U</div>
  <div class="post-item">V</div>
  <div class="post-item">X</div>
  <div class="post-item">Y</div>
  <div class="post-item">Z</div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.post-item {
  padding: 20px;
  background-color: #e2e2e2;
  text-align: center;
  display: inline-block;
  float: left;
  border: 5px solid #000;
}

.col-0,
.col-1,
.col-2 {
  width: 33.33%;
}

.col-3,
.col-4 {
  width: 50%;
}

JavaScript

let layout = function(container, child, total) {
  let main = document.querySelector(container);
  var items = main.querySelectorAll(child);
  var item = function myFunction(el, i) {
    el.classList.add("col-" + i % total);
  }
  items.forEach(item);
}

layout('.post-listing', '.post-item', 5);