JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div id="wrapper">
  <img class="productImage" src="http://local.boxon.se/globalassets/categories-webshop/ehandelspase-sml.jpg" alt="preview image">

  <div id="preview" class="cover">

  </div>
</div>

CSS

#wrapper {
  position: relative;
  width: 412px;
  height: 445px;
}

.productImage {
  position: absolute;
  width: 100%;
  height: 100%;
}

#preview {
  position: absolute;
  display: flex;
  justify-content: center;
  border: 1px solid red;
  box-sizing: border-box;
  flex-wrap: wrap;
  overflow: hidden;

  width: 284px;
  height: 396px;
  top: 47px;
  left: 64px;
}

.imgBox {
  display: flex;
  width: calc(284px/3 - 284px/100);
  height: calc(284px/3 - 284px/100);
  margin-bottom: calc(284px/100);
  border: 1px solid blue;
  box-sizing: border-box;
  align-self: center;
}

.imgBox img {
  width: 100%;
  align-self: center;
  /* transform: rotate(45deg); */
}

JavaScript

const preview = document.querySelector("#preview")


const imgWidth = preview.offsetWidth / 3;


const rows = Math.ceil(preview.offsetHeight / imgWidth);

    createImgBox();
/* 
let c, row
for (c = 1, row = 1; row <= rows; c++) {
  if (c % 3 == 0) {
    row++;
    createImgBox();
  } else {
    createImgBox();
  }
} */


function createImgBox() {
  const div = document.createElement("div");
  div.classList.add("imgBox")
  const img = document.createElement("img");
  img.src = "https://mtd-2015-assets.s3.amazonaws.com/uploads%2F1552231880843-r77vndw0gw-136316d3303096544fbbb44d85c489d5%2Fconsid_logo.png"

  div.appendChild(img)
  preview.appendChild(div)
}