'How do I dynamically create equally sized divs to fill the screen?

I've made an interactive 16x16 grid, who's divs grown and shrink based on screen size.

let x = 0;
let container = document.getElementById("container");
document.addEventListener('DOMContentLoaded', function() {

  createLongContainers();
  let longContainers = document.querySelectorAll(".longContainer");
  createBoxes(longContainers);
});

function createLongContainers() {
  for (var i = 0; i < 16; i++) {
    let div = document.createElement('div');
    div.className = "longContainer";
    div.style.display = "flex";
    div.style.flexDirection = "row"
    var lcHeight = ((100 / 16) + "%");
    div.style.height = lcHeight;
    div.style.width = "100vh";
    container.appendChild(div);

  }
}

function createBoxes(longContainers) {
  longContainers.forEach((div) => {


    for (var i = 0; i < 16; i++) {
      let box = document.createElement('div');
      box.className = "gridSquare";
      let boxWidth = ((100 / 16) + "%");
      box.style.height = "100%";
      box.style.width = boxWidth;
      box.style.backgroundColor = "black";
      box.onmouseover = function() {
        var randomColor = Math.floor(Math.random() * 16777215).toString(16);
        box.style.transitionDuration = "0s";
        box.style.backgroundColor = "#" + randomColor;
      };

      box.onmouseout = function() {
        box.style.transitionDuration = "3s";
        box.style.backgroundColor = "black";
      }
      div.appendChild(box);

    }

  });
}
#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Colorful Grid</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

<body style="margin: 0;">
  <div id="container"></div>
  <!-- Removes white border around page-->
</body>

</html>

I can't figure out how to fill the screen with this grid, while maintaining their square shape and ability to shrink in relation to the screen size.

For example, when I change div.style.width = "100vh"; to div.style.width = "100vw"; and add more boxes so they aren't stretched, they lose their ratio when the screen size is changed.

I know I need to dynamically create fixed size divs based on the current screen size, but I can't figure out how.

javascripthtmlcssliststream


Solution 1:[1]

Is this what you want?

let x = 0;
let container = document.getElementById("container");
document.addEventListener('DOMContentLoaded', function () {

    createLongContainers();
    let longContainers = document.querySelectorAll(".longContainer");
    createBoxes(longContainers);
});

function createLongContainers() {
    for (var i = 0; i < 16; i++) {
        let div = document.createElement('div');
        div.className = "longContainer";
        div.style.display = "flex";
        div.style.flexDirection = "row"
        div.style.justifyContent = "space-around"
        var lcHeight = "100%";
        div.style.height = lcHeight;
        div.style.width = "100%";
        container.appendChild(div);

    }
}

function createBoxes(longContainers) {
    longContainers.forEach((div) => {


        for (var i = 0; i < 16; i++) {
            let box = document.createElement('div');
            box.className = "gridSquare";
            box.style.backgroundColor = "black";
            box.onmouseover = function () {
                var randomColor = Math.floor(Math.random()*16777215).toString(16);
                box.style.transitionDuration = "0s";
                box.style.backgroundColor = "#" + randomColor;
            };

            box.onmouseout = function () {
                box.style.transitionDuration = "3s";
                box.style.backgroundColor = "black";
            }
            div.appendChild(box);

        }

    });
}
#container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%; 
}
.gridSquare {
    height: calc(100vh / 16);
    aspect-ratio: 1/1;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Colorful Grid</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script> 
</head>

<body style="margin: 0;"> <div id="container"></div><!-- Removes white border around page-->
</body>

</html>

Also try resizing it, it looks interesting because of the transition.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Some guy

Related Questions