CSS GRID - 如何使行扩展到容器高度？答案

【问题标题】：CSS GRID - How to make the rows extend to the container height?CSS GRID - 如何使行扩展到容器高度？
【发布时间】：2020-09-30 03:10:17
【问题描述】：

我刚开始学习 CSS，但我在使用 CSS GRiD 时无法理解一件事。

想象一下，我想用 CSS GRID 来完成网站的整个布局。如何告诉容器网格使用页面的整个高度？（就像宽度一样）。

对于列部分，我们在至少一列上使用例如“1fr”。但是对于行部分？如果我放 1fr，项目不会延伸到页面底部。

我的想法是，当我扩展我的窗口（垂直和水平）时，所有东西都会根据容器的高度和 witdh “增长”。因此，无论屏幕大小如何，布局都保持不变，只有容器和元素的大小会发生变化（div、字体、图像......）。

我认为有些东西我不明白，但我找不到解决方案。

谢谢你:)

<body>    
    <div class="grid-container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
        <div class="item item11">11</div>
        <div class="item item12">12</div>
    </div>
</body>

html{
    font-size: 62.5%; 
    background: rgb(21,56,125);
    background: linear-gradient(90deg, rgba(21,56,125,1) 0%, rgba(91,47,87,1) 48%, rgba(133,16,16,1) 100%);
}


.grid-container{    
    display:grid;
    grid-gap: 10px;
    grid-template-columns: repeat( 2, minmax(100px, 500px) );
    grid-template-rows:  repeat( 12, 1fr );
    border-style: black solid 20px;
}

.item{
    font-size: 4em;
    text-align: center;
    background-color: #E8DE42;
}

.item3{
    grid-column: span 2;
}

.item12{
    grid-column: span 2;
}

【问题讨论】：

标签： html css

【解决方案1】：

问题的症结在于你需要告诉 BODY 标签使用 height: 100% 和 width: 100% 。之后，我对您的 CSS GRID 值进行了一些调整：

https://codepen.io/lokase/pen/MWKKXWv

html, body {
    font-size: 62.5%; 
    background: rgb(21,56,125);
    background: linear-gradient(90deg, rgba(21,56,125,1) 0%, rgba(91,47,87,1) 48%, rgba(133,16,16,1) 100%);

    width: 100%;
    height: 100%;
}


.grid-container{    
    display:grid;
    grid-gap: 10px;
    grid-template-columns: repeat( 2 );
    grid-template-rows:  auto;
    border-style: black solid 20px;
    width: 100%;
    height: 100%;  
}

.item{
    font-size: 4em;
    text-align: center;
    background-color: #E8DE42;
}

.item3{
    grid-column: span 2;
}

.item12{
    grid-column: span 2;
}

【讨论】：

太棒了！我尝试了宽度和高度，但没有在身体上！谢谢你的帮助:)