让网格使用所有可用的space？

Question

我目前正在制作一个网络应用程序，其中有 3 个棋盘（类似于棋盘游戏），随着游戏的进行，棋盘上会填满方块。

The current state of my Web app

为此，我决定使用 grid 对齐所有板，但我希望我的网格使用 所有可用的 space .我已经有一个使用 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

我为 html、body 和 main 元素添加了 CSS 规则。这些规则使它们占据了页面的整个高度。这能解决您的问题吗？

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

让网格使用所有可用的space？

Let grid use all available space?

css

alignment

grid-layout