我如何删除 CSS Grid 创建的大白 space

Question

我正在创建一个简单的 CSS 3 列 2 行网格来显示画廊，然后我的内容将随之而来，但我意识到该网格包含大白 space，我就是努力删除。

在.gallery-containerdiv、Css网格后插入一个非常大space 在 Hello world 内容出现之前。

我想删除在 hello world 内容之前插入的巨大 space。请帮忙。源代码在这里

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>

Answer 1

它是由 grid-template-rows: 25% 25%; 引起的，因为这样你说的是 "of this grid, assign 25% as height for each line" 所以它理解在那两行之后，应该还有另外 50% 的东西......你应该使用 grid-template-rows: 50% 50%; 并手动设置高度为 .gallery-container

Answer 2

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

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

问题怎么解决的？

将grid-template-rows中的百分比值改为50%，这样就填充了父元素的100%。
您可以使用fr中的值。 fr 停留 flex，每个弹性大小的元素分享剩余的 space。因此，例如 grid-template-rows: 25% 25%; 将同样适合剩余的 50%。来源：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

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

让我知道它是否解决了您的问题，或者您是否找到了其他解决方案。

我如何删除 CSS Grid 创建的大白 space

How do i remove big white space created by CSS Grid

css

grid

gallery