如何删除由 CSS Grid 创建的大空白答案

【问题标题】：How do i remove big white space created by CSS Grid如何删除由 CSS Grid 创建的大空白
【发布时间】：2019-11-17 13:18:56
【问题描述】：

我正在创建一个包含 3 列和 2 行的简单 CSS 网格来显示画廊，然后我的内容会随之出现，但我意识到网格包含我正在努力删除的大空白。

在 .gallery-container div 之后，Css Grid 在 Hello world 内容到来之前插入了一个非常大的空间。

我想摆脱在 hello world 内容之前插入的巨大空间。请帮忙。源码在这里

https://wetransfer.com/downloads/ced939dd3b40fb365ed3f6522571ae9920191117134820/0d4757

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Gallery</title>

    <style>

        .wrapper{
            width:50%;
            margin:auto;
        }

        .gallery-container {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-rows: 25% 25%;
            gap: 4px;
            padding:20px; 
        }

        .gallery-div img {
            width:100%;
            height:100%;
            object-fit: cover;
            display:block;
        }

    </style>


  </head>
  <body>

    <div class="wrapper">

        <div class="gallery-container">

            <div class="gallery-div" ><img src='img/1.jpeg' alt="img" /></div>
            <div class="gallery-div" ><img src='img/2.jpeg' alt="img" /></div>
            <div class="gallery-div" ><img src='img/3.jpeg' alt="img" /></div>
            <div class="gallery-div" ><img src='img/4.jpeg' alt="img" /></div>
            <div class="gallery-div" ><img src='img/5.jpeg' alt="img" /></div>
            <div class="gallery-div" ><img src='img/6.jpeg' alt="img" /></div>

        </div>

        <div>
            <h1>Hello World</h1>
        </div>

    </div>

  </body>
</html>

【问题讨论】：

标签： css grid gallery

【解决方案1】：

您好@IsaacNewton，正如其他人已经回答的那样，问题是由 css 属性grid-template-rows 产生的，但我想探索其他解决方案。

为什么百分比值会导致这个问题？因为当您自动设置百分比值时，它会占用其父内容的 25%，在您的情况下为元素“gallery-container”。来源：https://www.w3schools.com/cssref/css_units.asp

这个问题怎么解决？

将grid-template-rows中的百分比值更改为50%，这样就可以填充100%的父元素。
您可以使用fr 中的值。 fr 留给flex，每个 flex-sized 元素都会占用剩余空间。因此，例如grid-template-rows: 25% 25%; 将同样适合剩余的 50%。来源：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

我还在以下链接 https://codepen.io/RaySoy/pen/YzzdymB 中创建了一个示例来解决您使用 fr 的问题。也可以随意使用它来测试grid-template-rows: 50% 50%;。

如果它解决了您的问题或者您是否找到了其他解决方案，请告诉我。

【讨论】：

将 grid-template-rows 更改为 50% 50% 解决了这个问题。我还在 px 中手动设置了 .gallery-container 的高度，以帮助使我的图像看起来更小。非常感谢

【解决方案2】：

这是由grid-template-rows: 25% 25%; 引起的，因为这样你是在说“在这个网格中，为每行指定 25% 作为高度”，所以它明白在这两行之后，应该还有另外 50% 的东西......您应该使用grid-template-rows: 50% 50%; 并将高度手动设置为.gallery-container

【讨论】：

嗨 AlbertoSinigaglia，我已经尝试过了，但仍然无法解决。我的源代码可以在这里下载wetransfer.com/downloads/…
对不起，没有图片就没有那个差距，编辑了答案
将 grid-template-rows 更改为 50% 50% 解决了这个问题。我还在 px 中手动设置了 .gallery-container 的高度，以帮助使我的图像看起来更小。非常感谢
没问题...以防万一，对每个对您有帮助、改善社区的问题都投上一票
我已经这样做了，但是因为我的声誉低于 15，它说它已被记录，但它不会改变公开显示的点赞分数。