Почему style.gridTemplateRows возвращает пустую строку

У меня есть таблица, по умолчанию она имеет размер 2x2, ee grid-template-rows: 20vh 20vh; и grid-template-columns: 30vw 30vw.

У меня есть родительский контейнер, который и является этой таблицей 2х2. В нем есть 4 дива, которые является ячейками таблицы. В каждом из этих дивов есть 1 скрытый див(у которого display:none;), и кнопка, при нажатии на который, должен показываться соседний с ней скрытый div. Но проблема в том, что мой скрытый div, содержит в себе iframe, который просто не помещается в таблицу с ее размерами 2x2, а постоянно держать таблицу в нужном мне размере - просто поливание сайта водой, т.к. места нужно ОЧЕНЬ много(размер iframe: width: 87vw; heigth: 89vh, а уменьшить нельзя, становиться неюзабельно); И я пришел к решению которое я уже описал: увеличивать размер контейнера.

Но контейнера у нас 4, и нужно сделать так, чтобы при открытии одного контейнера(увеличении его размера) все остальные контейнеры оставались своих размеров(до открытия: grid-template-rows: 20vh 110vh 20vh 20vh; а после открытия: grid-template-rows: 110vh 110vh 20vh 20vh). Как было показано в этом GIF: https://i.postimg.cc/QNB8tq9M/image.gif

А сама проблема в том, что почему-то, let result = document.getElementById("projects-grid").style.gridTemplateRows; возвращает пустую строку(проверено дебагом IntelliJ IDEA). Почему она возвращает пустую строку? Или как можно сделать эту задачу по другому?

Думаю, суть задачи объяснил понятно, если непонятно, то есть комментарии.

Мой код:

HTML:

<div id="projects-grid">
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Go to Tribute page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(0)">
                        <p id="first-show-p">Click to open site</p>
                    </button>
                    <div id="first-hidden" class="hidden">
                        <!-- <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt=""> -->
                        <iframe src="https://codepen.io/YouAreMe12/full/bGRdxZg" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Survey form</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(1)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="second-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Product landing page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(2)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="third-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
                <div class="project-tile">
                    <a href="">
                        <button class="a-btn">
                            <h2>Technical documentation page</h2>
                        </button>
                    </a>
                    <button class="show-btn" onclick="buttonClick(3)">
                        <p class="show-para">Click to open site</p>
                    </button>
                    <div id="forth-hidden" class="hidden">
                        <img src="https://i.postimg.cc/V6Dh8R60/Tribute-Page-Preview.png" alt="">
                    </div>
                </div>
            </div>

CSS:

#projects-grid {
  display: grid;
  grid-template-columns: 30vw 30vw;
  grid-template-rows: 20vh 20vh;
  grid-gap: 9rem;
  margin: 0 auto 6rem;
}
.project-tile {
  background: var(--main-gray);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  margin: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  border: 1px solid cyan;
}
#first-hidden {
  display: none;
}
#second-hidden {
  display: none;
}
#third-hidden {
  display: none;
}
#forth-hidden {
  display: none;
}
iframe {
  border-radius: 5px;
  width: 87vw;
  height: 89vh;
  border-bottom: 7px solid var(--main-white);
}

JS:

const firstDisplay = document.getElementById("first-hidden").style.display;
const secondDisplay = document.getElementById("second-hidden").style.display;
const thirdDisplay = document.getElementById("third-hidden").style.display;
const forthDisplay = document.getElementById("forth-hidden").style.display;

function buttonClick(id) {
    //turn on
    let rowsHeight = getRowsHeight();
    if (rowsHeight[id] == "20vh" || rowsHeight[id] == "20vh ") {
        show(id);
    } else {
        hide(id);
    }
}

function show(id) {
    let hidden;
    let rowsHeight = getRowsHeight();
    if (id == 0) {
        rowsHeight[0] = "110vh ";
        hidden = "first"
    } else if (id == 1) {
        rowsHeight[1] = "110vh ";
        hidden = "second"
    } else if (id == 2) {
        rowsHeight[2] = "110vh ";
        hidden = "third"
    } else {
        rowsHeight[3] = "110vh";
        hidden = "forth"
    }
    let rows = "";
    for (let i = 0; i < rowsHeight.length; i++) {
        const element = rowsHeight[i];
        rows += element;
    }
    hidden += "-hidden";
    document.getElementById(hidden).style.display = "block";
    document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
    document.getElementById("projects-grid").style.gridTemplateRows = rows;
}

function hide(id) {
    let rowsHeight = getRowsHeight();
    let hidden;
    let twoOnTwo = true;
    if (id == 0) {
        rowsHeight[0] = "20vh ";
        hidden = "first";
        twoOnTwo = false;
    } else if (id == 1) {
        rowsHeight[1] = "20vh ";
        hidden = "second";
        twoOnTwo = false;
    } else if (id == 2) {
        rowsHeight[2] = "20vh ";
        hidden = "third";
        twoOnTwo = false;
    } else if (id == 3) {
        rowsHeight[3] = "20vh";
        hidden = "forth";
        twoOnTwo = false;
    }
    document.getElementById(hidden + "-hidden").style.display = "none";
    if (twoOnTwo) {
        document.getElementById("projects-grid").style.gridTemplateRows = "20vh 20vh";
        document.getElementById("projects-grid").style.gridTemplateColumns = "30vw 30vw";
    } else {
        let rows = "";
        for (let i = 0; i < rowsHeight.length; i++) {
            rows += rowsHeight[i];
        }
        document.getElementById("projects-grid").style.gridTemplateColumns = "95vw";
        document.getElementById("projects-grid").style.gridTemplateRows = rows;
    }
}

function getRowsHeight() {
    let result = document.getElementById("projects-grid").style.gridTemplateRows.split(" ");
    return result;
}