所以我才刚刚开始使用 CSS-grid 直到现在才开始使用 Bootstrap(我知道晚会晚了，但是嘿，我现在来了!)而且我在使用 grid 时遇到了一些麻烦-行高。
目标:
响应式地将整个网格的高度设置为 100% 视口(viewport)高度。
问题:
在我的网格中，我正在使用 grid-gap 属性。这些对网格高度的小增加将我的 vh 单元抛出，因此网格的底部不再响应地触及视口(viewport)的底部。
我尝试过的(以及没有奏效的...):
使用 vh - 正如我所说，这不起作用，因为(据我所知)网格间隙导致向内容添加额外的高度，因此尽管我进行了 vh 计算合起来等于 100vh，内容实际上从视口(viewport)底部流出。
使用 fr 单位设置网格行高 - 我也刚刚开始掌握这个新的(差不多)单位，但是当我在这里尝试它时，它似乎是从内容总和中计算分数不是视口(viewport)高度；因此内容太短了，在内容底部和视口(viewport)底部之间留下了很大的空隙。
为网格容器设置最小和/或最大高度 - 这似乎与行高的显式设置冲突，因此返回的结果与我在屏幕上看到的完全不同。
在处理宽度时，这一切都非常简单，但高度又一次让我大吃一惊。有人有什么建议吗？
<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;
}
最佳答案
根据您的声明:grid-template-rows: 10vh repeat(4, 20vh) 10vh; - 看起来您想要 6 行，中间四行是第一行和最后一行的两倍高排。所以:
1) 将 grid-template-rows: 10vh repeat(4, 20vh) 10vh; 更改为
grid-template-rows: 1fr repeat(4,2fr) 1fr;
2) 给网格添加一个高度:height: 100vh;
* {
margin: 0;
padding: 0;
}
main {
display: grid;
grid-template-rows: 1fr repeat(4,2fr) 1fr;
grid-gap: 5px;
height: 100vh;
grid-gap: 5px;
}<main><!-- Grid Container -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</main>关于html - 如何使用 CSS-Grid 实现响应式高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51123242/