Html 如何使用CSS网格实现响应高度？_Html_Css_Css Grid

Html 如何使用CSS网格实现响应高度？

html css

Html 如何使用CSS网格实现响应高度？,html,css,css-grid,Html,Css,Css Grid,因此，我刚刚开始使用cssgrid，直到现在才使用Bootstrap（我知道派对晚了，但嘿，我现在在这里！），而且我在网格行高度方面遇到了一些麻烦目标：以响应方式将栅格作为一个整体的高度设置为100%视口高度问题：在我的网格中，我正在使用网格间隙属性。这些对网格高度的小增加将我的vh单元抛出，因此网格底部不再响应地撞击视口底部我尝试过的（以及没有成功的…）：使用vh——正如我所说，这是不起作用的，因为（据我所知）网格间隙会导致向内容添加额外的高度，因此尽管我的vh计算结果都等于100

因此，我刚刚开始使用cssgrid，直到现在才使用Bootstrap（我知道派对晚了，但嘿，我现在在这里！），而且我在网格行高度方面遇到了一些麻烦

目标：

以响应方式将栅格作为一个整体的高度设置为100%视口高度

问题：

在我的网格中，我正在使用网格间隙属性。这些对网格高度的小增加将我的vh单元抛出，因此网格底部不再响应地撞击视口底部

我尝试过的（以及没有成功的…）：

使用vh——正如我所说，这是不起作用的，因为（据我所知）网格间隙会导致向内容添加额外的高度，因此尽管我的vh计算结果都等于100vh，但内容实际上会从视口底部流出

使用fr单位设置网格行高度-我也刚刚开始掌握这个新的（ish）单位，但当我在这里尝试它时，它似乎是从内容的总和而不是视口高度中计算分数；因此，内容太短，在内容底部和视口底部之间留下了很大的间隙

设置网格容器的最小高度和/或最大高度-这似乎只是与行高度的显式设置冲突，因此我在屏幕上看到的结果没有任何变化

在处理宽度的问题时，这一切都是那么简单，但高度又一次咬到了我的屁股。有人有什么建议吗

<body>
    <main><!-- Grid Container -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </main>
</body>

* {
margin: 0;
    padding: 0;
}

main {
    display: grid;
    grid-template-rows: 10vh repeat(4, 20vh) 10vh;
    grid-gap: 5px;
}


1.
2.
3.
4.
5.
6.
* {
保证金：0；
填充：0；
}
主要{
显示：网格；
网格模板行：10vh重复（420VH）10vh；
网格间距：5px；
}

来自您的声明：

网格模板行：10vh重复（420VH）10vh-看起来您需要6行，中间的四行是第一行和最后一行的两倍。因此：
1） 更改网格模板行：10vh重复（420VH）10vh到
grid-template-rows: 1fr repeat(4,2fr) 1fr;

2） 向网格添加高度：高度：100vh

*{
保证金：0；
填充：0；
}
主要{
显示：网格；
网格模板行：1fr重复（4,2fr）1fr；
网格间距：5px；
高度：100vh；
网格间距：5px；
}

1.
2.
3.
4.
5.
6.
你很接近，提到了FR和VH-但是，我不确定你是否同时使用了它们
这里是一个链接到一个工作代码笔。我所做的更改是将网格模板行更改为使用fr，然后将高度100vh添加到网格容器中

（！！！！）我既喜欢它，也讨厌它，当我一直在扯我的头发的问题有这么简单的解决方案。工作完美。谢谢。
grid-template-rows: 1fr repeat(4, 2fr) 1fr;
height: 100vh;