Question

我刚开始学习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;
}

Answer 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;
}

CSS GRID-如何使行延伸到容器高度？

1 个答案: