JSFiddle - React, Tailwind, and code Playground

by web86

HTML

<div class="test">
  <div class="qwerty"><a href="#">1</a></div>
  <div class="qwerty"><a href="#">2</a></div>
  <div class="qwerty"><a href="#">3</a></div>
  <div class="qwerty"><a href="#">4</a></div>
  <div class="qwerty"><a href="#">5</a></div>
  <div class="qwerty"><a href="#">6</a></div>
  <div class="qwerty"><a href="#">7</a></div>
  <div class="qwerty"><a href="#">8</a></div>
  <div class="qwerty"><a href="#">9</a></div>
  <div class="qwerty"><a href="#">10</a></div>
  <div class="qwerty"><a href="#">11</a></div>
  <div class="qwerty"><a href="#">12</a></div>
  <div class="qwerty"><a href="#">13</a></div>
  <div class="qwerty"><a href="#">14</a></div>
  <div class="qwerty"><a href="#">15</a></div>
  <div class="qwerty"><a href="#">16</a></div>
  <div class="qwerty"><a href="#">17</a></div>
  <div class="qwerty"><a href="#">18</a></div>
  <div class="qwerty"><a href="#">19</a></div>
  <div class="qwerty"><a href="#">20</a></div>
</div>

CSS

div  {
  display: flex;
  flex-wrap: wrap;
}
div > div {
  justify-content: space-around;
  color: #FFFFFF;
  font-family: Arial;
  width: 300px;
}
div.wrapped div {
    background: #222;  
}
div > div.wrapped {
  background: #cfcfcf;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 100%;
}
div > div.wrapped:nth-child(odd) {
  background: #f5a1a1;
  }
.wrapped a {color:#fff};

JavaScript

function detectWrap(className) {
    const parent = document.querySelector(className);
    let items = [...parent.children];
    let wrappedItems = [];
    let prevItem = [];
    let currItem = [];
    let obj = []; 
     
for(const item of items) {
         currItem = item.getBoundingClientRect().top; // координаты элемента
        
         if (prevItem.length == 0) {
          obj.push({'a': [item]}); //создать новый [] и поместить элемент
         } else {
             if (prevItem < currItem) {
                wrappedItems = currItem; // то кидаем в массив
                obj.push({'a': [item]}); //создать новый [] и поместить элемент
             } else if (wrappedItems && wrappedItems === currItem) {
                    obj[obj.length-1].a.push(item);
                 } else {
                     obj[obj.length-1].a.push(item);
                 }
         }
        prevItem = currItem; // запоминаем последний
    }
    //console.log(obj); // проверка массива
      
    return obj;
}

function wrapp_lines(className){ 
        let wrappedItems = detectWrap(className);
        const parent = document.querySelector(className);
        parent.innerHTML = wrappedItems.map( item => `<div class="wrapped">${item.a.map( elem => elem.outerHTML).join('') }</div>`).join('');
} 
function resized_wrapp_lines(className){ 
        const parent2 = document.querySelector(className);
        const items2 = [...parent2.children];
        parent2.innerHTML = items2.map( item => [...item.children].map( item2 => item2.outerHTML ).join('')).join('');
        
        wrapp_lines(className); // запускаем перерисовку
} 

window.onload = function(){
    wrapp_lines('.test');
    window.onresize = function() {
        
         resized_wrapp_lines('.test');
    };
};