I have this layout:

And I would like to know how I can make children elements automatically fit into this layout as more are added and removed.

I tried a case statement:

switch (_wm.openWindows.length) {
            case 0:
                break;
            case 1:
                _wm.openWindows[0].iframe.style.width = "100%";
                _wm.openWindows[0].iframe.style.height = "calc(100vh - 130px)";
                break;
            case 2:
                for(let i = 0; i < 2; i++){
                    _wm.openWindows[i].iframe.style.width = "calc(50% - 20px)";
                    _wm.openWindows[i].iframe.style.height = "calc(100vh - 130px)";
                }
                _wm.openWindows[0].iframe.style.marginRight = "17px";
                _wm.openWindows[1].iframe.style.marginLeft = "17px";
                break;
            case 3:
                _wm.openWindows[0].iframe.style.width = "calc(50% - 20px)";
                _wm.openWindows[0].iframe.style.height = "calc(100vh - 130px)";
                for(let i = 1; i < 3; i++){
                    _wm.openWindows[i].iframe.style.width = "calc(50% - 20px)";
                    _wm.openWindows[i].iframe.style.height = "calc(50vh - 130px)";
                }

                _wm.openWindows[1].iframe.style.position = "absolute";
                _wm.openWindows[1].iframe.style.top = "40px";
                _wm.openWindows[1].iframe.style.right = "40px";

                _wm.openWindows[0].iframe.style.marginRight = "17px";
                _wm.openWindows[1].iframe.style.marginLeft = "17px";
                break
        }

But this isn’t really practical, so is there a way to achieve this using plain css, or maybe some more concise JS code, that works endlessly as more elements are added?