Question

我已经创建了一个站点设计，并且一切正常，除了我在使网格项目占据其可用的所有空间方面遇到问题。

我已将该站点添加到Codepen here.

中

WHERE ID = 1

HTML：

.container{
    border-radius: 8px;
    width:90%;
    height: 90vh;
    margin: 0 auto;
    background: #ecf0f1;

    display: flex;
    flex-direction: column;
}

main{
    display: grid;
    grid-template-columns: 300px 1fr;
    flex-grow: 1;
}

.data-box{
    padding-top:1rem; 
    background: #e74c3c;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3rem 2.5rem 2.5rem auto;
    justify-items: center;
    align-items: center;

}

.display-box{
    padding: 2em;
    background: #2c3e50;

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(6em,1fr));
    grid-gap:1.5rem;
    align-items: center;
    justify-items: center;
}

可以在全页视图中注意到该问题。容器div是一个flexbox，其中包含带flex-grow 0的主文本div和带flex-grow 1的主标签。main标签是具有两个网格项显示框和数据框的网格容器。我很难让它们占据主标签中所有可用的空间，如白色空白所示。

Answer 1

main元素实际上正在拉伸容器的整个高度。换句话说，flex-grow: 1正在工作。（您可能已经知道这一点。）子元素（data-box和display-box）并没有充分发挥父元素的高度，因为它们根本没有足够的内容。

您还将data-box设置为：

grid-template-rows: 3rem 2.5rem 2.5rem auto;

这将创建四行已定义高度或基于内容的高度。使用fr个单位会覆盖可用空间。

grid-template-rows: 3fr 2fr 1fr auto;

revised codepen

网格项目没有完全占据网格容器

1 个答案: