JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

div {
  padding: 5px 5px 0 5px;
  margin-bottom: 5px;
  min-height: 20px;
}
.container {
  border: 2px solid red;
}
.item-box {
  border: 2px solid green;
}
.item {
  background: blue;
}

JavaScript

var groupLength = 3; // 

var container = document.querySelector('.container');
var items = container.querySelectorAll('.item');
var df = document.createDocumentFragment();
var range = document.createRange();
for (var i = 0; i < items.length; i += groupLength) {
  var wrap = document.createElement('div');
  wrap.className = 'item-box';
  range.setStartBefore(items[i]);
  range.setEndAfter(items[Math.min(i + groupLength, items.length) - 1]);
  range.surroundContents(wrap);
  //wrap.appendChild(range.extractContents());
  df.appendChild(wrap);
}
container.appendChild(df);