时间戳

首页 > 解决方案 > 如何使用 CSS-Grid 实现响应式高度？

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

问题描述

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

目标：

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

问题：

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

我尝试过的（以及没有奏效的...）：

  1. 使用 vh - 正如我所说，这是行不通的，因为（据我所知）网格间隙会导致将额外的高度添加到内容中，因此尽管我的 vh 计算结果都等于 100vh，内容实际上在视口底部运行。

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

  3. 为网格容器设置最小和/或最大高度 - 这似乎与行高的显式设置冲突，因此我在屏幕上看到的内容完全没有变化。

在处理宽度时这一切都是如此简单，但高度又一次让我感到难过。有没有人有什么建议？

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

标签： htmlcsscss-grid

解决方案

从您的声明中：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>

推荐阅读