How can I print a diagonal line of buttons (top-left -> bottom-right) upon loading page, each button rendering after the last?

Question

In my project I am focused right now on the frontend implementation of a series of buttons. Once loading the page, buttons will render on the screen, one after the other, starting from the top-left of the screen. Right now, I'm trying to get each preceding button to print lower and to the right of the previous button, with a fade in effect.

It seems like regardless of what I try, the buttons will print horizontally in rows, when that's not what I am trying to accomplish. For example, if I declare 200 hexagon buttons, I will get 3.5 horizontal rows of hexagons as opposed to them presenting at an angle. I thought it may have been due to screen-size, so I tried fixing the screen size but no change. Attached is an image of the shape I want to accomplish. My buttons are hexagon-shaped, so my goal is to create a honeycomb structure in a staircase or diagonal-like format/ pattern.

I attached a rough image on what I'm trying to accomplish, along with snippets of the relevant code. The image isn't perfect, so anything along the lines of a staircase/ diagonal structure is what I'm trying to accomplish. Any feedback is much appreciated; thank you.

What I'm trying to accomplish:

I have tried different logics in my for-loop. I have not tried adding logic in a separate JavaScript file yet, but I was thinking I could utilize a for-loop within my html page and utilize some algorithm to render buttons that are lower and to the right of the previous button.

I have tried declaring new row/ col variables, that gets manipulated within the for loop but no change.

const hexagonContainer = document.querySelector(".hexagon-container");
const numHexagons = 200;
const numCols = 50; //37 vertial rows

for (let i = 0; i < numHexagons; i++) {
  const hexagon = document.createElement("div");
  hexagon.classList.add("hexagon-button");

  const row = Math.floor(i / numCols);
  const col = i % numCols;

  const xPosition = col * 100; //adding more xPosition seems to make it spread further vertically
  const yPosition = row * 25;

  hexagon.style.animationDelay = `${(row + col) * 0.1}s`; // Adding a delay for a staggered appearance
  hexagon.style.transform = `translate(${xPosition}px, ${yPosition}px)`;
  hexagonContainer.appendChild(hexagon);
}
window.addEventListener('load', function() {
  hexagonContainer.classList.add('show');
});