时间戳

首页 > 解决方案 > 如何删除由 CSS Grid 创建的大空白

css - 如何删除由 CSS Grid 创建的大空白

问题描述

我正在创建一个简单的 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>

标签： cssgridgallery

解决方案

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

推荐阅读