Question

所以我才刚刚开始使用CSS-grid，直到现在为止都使用Bootstrap（我知道这个聚会很晚，但是，我现在在这里！），而我在使用网格时遇到了一些麻烦-行高。

目标：

以响应方式将整个网格的高度设置为100％视口高度。

问题：

在我的网格中，我正在使用grid-gap属性。网格高度的这些小增加使我的vh单位丢了，因此网格底部不再响应性地击中视口底部。

我已经尝试过的（以及未起作用的...）：

使用vh-如我所说，这是行不通的，因为（据我所知）grid-gap导致内容增加了额外的高度，因此尽管我进行了vh计算相加等于100vh，实际上内容从视口的底部流出。
使用fr单位设置网格行高度-我也刚开始使用这个新的（ish）单位，但是当我在这里尝试时，它似乎是从内容总和中获取其分数计算 not 视口高度；因此内容太短了，在内容底部和视口底部之间留有很大的空隙。
为网格容器设置最小高度和/或最大高度-这似乎与行高的显式设置发生冲突，因此根本没有改变我在屏幕上看到的内容。 / p>

当处理宽度时，这是如此的简单，但是高度又再次咬住了我的屁股。有人有建议吗？

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

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

Answer 2

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

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

Codepen

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

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

2 个答案: