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