awoll_n,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.group{
border: 1px solid #0000CD;
display: flex;
justify-content: space-around;
}
.p--img{
height: 100px;
width: 100px;
background-color: #FFFF00;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const wrapEach = (selector, wrapper, countToWrap, cls) => {
let container = document.createElement(wrapper);
container.classList.add(cls);
document.querySelectorAll(selector).forEach((el, i) => {
i % countToWrap || (container = container.cloneNode(),
el.replaceWith(container));
container.append(el);
})
}
wrapEach('.p--img', 'div', 4, 'group');
});
</script>
</head>
<body>
<div class="images">
<img class="p--img" src="images/p01.jpg" alt="">
<img class="p--img" src="images/p02.jpg" alt="">
<img class="p--img" src="images/p03.jpg" alt="">
<img class="p--img" src="images/p04.jpg" alt="">
<img class="p--img" src="images/p05.jpg" alt="">
<img class="p--img" src="images/p06.jpg" alt="">
<img class="p--img" src="images/p07.jpg" alt="">
<img class="p--img" src="images/p08.jpg" alt="">
</div>
</body>
</html>