Разрешить сетке использовать все доступное пространство?

Question

В настоящее время я делаю веб-приложение, в котором у вас будет 3 доски (аналогично настольной игре), которые будут заполняться плитками по ходу игры.

Текущее состояние моего Веб-приложение

Для этого я решил использовать grid для выравнивания всех досок, но я бы хотел, чтобы моя сетка использовала все доступное пространство . У меня уже есть нижняя полоса, которая использует position: fixed, и верхняя полоса, которая использует flex.

Я уже пытался отрегулировать высоту, но это не сработало.

Вот соответствующий код для него:

main{
    display: grid;
    grid-template-columns: 60% 20% 20%;
    grid-template-rows: 100%;
    grid-template-areas: "playerBoard moneyBoard marketBoard";
    justify-items: center;
    align-items: center;
}

.tileBoard{
    display: grid;
    grid-column-start: 1;
}
.moneyBoard{
    display: grid;
    grid-column-start: 2;
}
.marketBoard{
    display: grid;
    grid-column-start: 3;
}

<main>
    <div class="tileBoard">
        <p>Start Tile</p>
    </div>
    <div class="moneyBoard">
        <h2>Money</h2>
        <h2>Money</h2>
        <h2>Money</h2>
        <h2>Money</h2>
    </div>
    <div class="marketBoard">
        <h3>Buyable Tile 1</h3>
        <h3>Buyable Tile 2</h3>
        <h3>Buyable Tile 3</h3>
        <h3>Buyable Tile 4</h3>
    </div>
</main>

Answer 1

Я добавил CSS правила для html, body и main элементов. Эти правила заставляют их занимать всю высоту страницы. Решает ли это вашу проблему?

/* Added */
html {height: 100%}

/* Added */
body {
	margin: 0;
	height: 100%;
}

main{
    display: grid;
    grid-template-columns: 60% 20% 20%;
    grid-template-rows: 100%;
    grid-template-areas: "playerBoard moneyBoard marketBoard";
    justify-items: center;
    align-items: center;
	min-height: 100%; /* Added */
}

.tileBoard{
    display: grid;
    grid-column-start: 1;
}
.moneyBoard{
    display: grid;
    grid-column-start: 2;
}
.marketBoard{
    display: grid;
    grid-column-start: 3;
}

<main>
    <div class="tileBoard">
        <p>Start Tile</p>
    </div>
    <div class="moneyBoard">
        <h2>Money</h2>
        <h2>Money</h2>
        <h2>Money</h2>
        <h2>Money</h2>
    </div>
    <div class="marketBoard">
        <h3>Buyable Tile 1</h3>
        <h3>Buyable Tile 2</h3>
        <h3>Buyable Tile 3</h3>
        <h3>Buyable Tile 4</h3>
    </div>
</main>