Let grid use all available space?

Question

I'm currently making a web application where you'll have 3 boards (similar to a board game) that will be filled with tiles as the game progresses.

The current state of my Web app

For this, I've decided to use grid to align all the boards, but I would like my grid to use all available space. I do have already a bottom bar that uses position: fixed and a top bar that uses flex.

I've tried adjusting the height already, but this didn't work.

Here's the relevant code for it:

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

I added CSS rules for html, body, and main elements. These rules make them occupy the full height of the page. Does this solve your problem?

/* 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>