如何使用 CSS-Grid 实现响应式高度？答案

【问题标题】：How can I achieve responsive height with CSS-Grid?如何使用 CSS-Grid 实现响应式高度？
【发布时间】：2018-07-01 12:20:17
【问题描述】：

所以我才刚刚开始使用 CSS-grid，直到现在一直使用 Bootstrap（我知道的派对迟到了，但是嘿，我现在在这里！）我遇到了一些网格问题-行高。

目标：

响应式地将整个网格的高度设置为 100% 视口高度。

问题：

在我的网格中，我使用了 grid-gap 属性。这些对网格高度的小添加将我的 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;
}

【问题讨论】：

标签： html css css-grid

【解决方案1】：

根据您的声明：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>

【讨论】：

(!!!!) 当我一直在努力解决的问题有一个简单的解决方案时，我既喜欢它又讨厌它。完美运行。非常感谢。

【解决方案2】：

你很接近，提到了 FR 和 VH - 但是，我不确定你是否同时使用了它们。

这是一个工作代码笔的链接。我所做的更改是将 grid-template-rows 更改为使用 fr，然后将 100vh 的高度添加到您的网格容器中。

Codepen

grid-template-rows: 1fr repeat(4, 2fr) 1fr;
height: 100vh;

【讨论】：