How do you show multiple iframes when in full screen mode?

Question

I am making a button which opens the browser to full screen mode. The content displayed in full screen mode are 5 iframe sources.

This is not a duplicate to this: "Full screen" <iframe>, this Full-screen iframe with a height of 100%, or this How to enable fullscreen in IFrame because it pertains to a single iframe being able to be shown in full screen.

The difference I'm attempting to accomplish is that I cannot open multiple, in this case 5 iframe sources, under 1 full screen.

Here's my code:

JAVASCRIPT:

function toggleFullscreen() {
  var container = document.getElementById("fullscreen-container");
  var iframes = container.querySelectorAll(".fullscreen-iframe");

  if (!document.fullscreenElement) {
    if (container.requestFullscreen) {
      container.requestFullscreen();
    } else if (container.mozRequestFullScreen) {
      container.mozRequestFullScreen();
    } else if (container.webkitRequestFullscreen) {
      container.webkitRequestFullscreen();
    } else if (container.msRequestFullscreen) {
      container.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

document.addEventListener("fullscreenchange", function() {
  var container = document.getElementById("fullscreen-container");
  var iframes = container.querySelectorAll(".fullscreen-iframe");

  if (document.fullscreenElement) {
    container.style.display = "block";

    // Show iframes when already in full-screen mode
    iframes.forEach(function(iframe) {
      iframe.style.display = "block";
    });
  } else {
    container.style.display = "none";

    // Hide iframes when not in full-screen mode
    iframes.forEach(function(iframe) {
      iframe.style.display = "none";
    });
  }
});

CSS:

#fullscreen-container {
  display: none;
}

.fullscreen-iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 40%;
  height: 40%;
  border: none;
  display: none;
}

.fullscreen-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
}

.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

HTML:

<div class="center-wrapper">
  <button onclick="toggleFullscreen()">Toggle Fullscreen</button>
</div>
<div id="fullscreen-container">
  <div class="fullscreen-grid">
    <iframe class="fullscreen-iframe" src="https://bing.com"></iframe>
    <iframe class="fullscreen-iframe" src="https://bing.com"></iframe>
    <iframe class="fullscreen-iframe" src="https://bing.com"></iframe>
    <iframe class="fullscreen-iframe" src="https://bing.com"></iframe>
    <iframe class="fullscreen-iframe" src="https://bing.com"></iframe>
  </div>
</div>

A working JSFIDDLE code snippet is available.

As you can see from the https://jsfiddle.net/oh8x6pet/ when the "Toggle Fullscreen" button is clicked on, full screen mode is entered and only one iframe is showing.

The problem I'm running into is that all 5 iframe sources should be displayed when in full screen mode, however, only 1 iframe source shows.

Here's an image of roughly how it should look:

I'm just using bing.com as a filler, but various sources will take their spot.

How do you show multiple iframe sources when in full screen mode? Thank you for the guidance.