sibling-count() Test

by MegaScience

HTML

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

CSS

html, body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(100vw / sqrt(sibling-count() * (100vw / 100vh)));
  border: 1px solid black;
}

JavaScript

function getRandomInt(max) {
  return Math.floor(Math.random() * max)
}

function mapElement(value, index) {
  const elem = document.createElement('div')
  elem.classList.add('item')
  elem.innerText = `E ${index + 1}`
  return elem
}

function main() {
  const siblingCount = getRandomInt(20) + 1
  const container = document.querySelector('.container')
  container.dataset.siblingCount = siblingCount
  container.append(...Array.from({ length: siblingCount }, mapElement))
}

main()