What would be the best approach to build a CSS grid with 1500 divs that fill in te best way the viewport?

Question

I have 1500 divs (nothing should be displayed into them) and I would like based on the size of the viewport size to build a grid that best fill in the viewport. Divs should fill the rows up to the end of the viewport and the columns up to the height of the viewport. It is ok when the last line contains empty space at the end when the divs cannot be distributed to fully fill the last line.

The number of divs is fixed.

What would be the best approach to reach this in CSS? Would JS here be required to calculate how to best size the divs related to the viewport resolution?

Thanks!

Edit: I have obtain the wrap and the display, but I would like to further refine it in order for the divs to have a better width/height ratio (they should look as closer as possible to a quadrat...)

.flex-container {
    display: flex;
    width: 100%;
    height: 100vh;
    flex-flow: row wrap;
    background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 2px;
  text-align: center;
}

<!DOCTYPE html>
<html>
<body>
  <div class="flex-container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!--another 1495 divs here-->
  </div>
</body>
</html>

With filling the viewport, do you mean all divs need to fit into the viewport without scrolling? Are they all the same size or do they have to stay relative size to each other? Can you create a minimal reproducible example to give an idea of the setup? Use the <> button to make it a runnable snippet. — Peter Pointer
– Peter Pointer, Commented Sep 9 at 9:03
@PeterPointer: yes, I mean I would like to display all the divs without the need to scroll. They should all fit in the viewport. Divs should have the same size. I will try to make a minimal reproducible example and get back. — Vlad
– Vlad, Commented Sep 9 at 9:33
@RobbyCornelissen yes, the divs should fill in the best way the viewport. if the last row has empty spaces this should be ok. — Vlad
– Vlad, Commented Sep 9 at 9:36
@PeterPointer I moved forward with my research and managed to make a "interim solution". Now the divs ar filling the viewport but they are very "rectanglish". Is there any way to make them more "quadratish"? :-D — Vlad
– Vlad, Commented Sep 9 at 11:58

Isaac Serrano · Accepted Answer · 2025-09-10 22:15:28Z

Use CSS Grid and a tiny bit of JS to choose the column count that yields the largest possible square tiles that fit in 100vw × 100vh. CSS alone cannot compute the optimal size for an arbitrary fixed N

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
  html, body { height: 100%; margin: 0; }
  .grid {
    --cols: 1;
    --gap: 2px;
    display: grid;
    width: 100vw;
    height: 100vh;
    gap: var(--gap);
    grid-template-columns: repeat(var(--cols), 1fr);
    background: dodgerblue;
  }
  .grid > div {
    aspect-ratio: 1 / 1;   /* force squares */
    background: #f1f1f1;   /* content stays empty */
  }
</style>
</head>
<body>
  <div class="grid" id="grid">
    <!-- your 1500 empty divs -->
    <!-- <div></div> x 1500 -->
  </div>

  <script>
    (function () {
      const grid = document.getElementById('grid');
      const N = grid.children.length;
      const gap = parseFloat(getComputedStyle(grid).gap) || 0;

      function fit() {
        const vw = grid.clientWidth;
        const vh = grid.clientHeight;

        let bestCols = 1;
        let bestSize = 0;

        const maxCols = Math.min(N, Math.max(1, Math.floor(vw))); // safe bound
        for (let cols = 1; cols <= maxCols; cols++) {
          const cellW = Math.floor((vw - gap * (cols - 1)) / cols);
          if (cellW <= 0) break;

          const rows = Math.ceil(N / cols);
          const neededH = rows * cellW + gap * (rows - 1);

          if (neededH <= vh && cellW > bestSize) {
            bestSize = cellW;
            bestCols = cols;
          }
        }

        grid.style.setProperty('--cols', bestCols);
      }

      window.addEventListener('resize', fit, { passive: true });
      fit();
    })();
  </script>
</body>
</html>

Collectives™ on Stack Overflow

What would be the best approach to build a CSS grid with 1500 divs that fill in te best way the viewport?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related