我正在创建一个简单的3列2行的CSS网格以显示画廊，然后跟随我的内容，但我意识到该网格包含了很大的空白，我正努力将其删除。
在。gallery-container div之后，Css Grid在Hello世界内容出现之前插入非常大空格。
我想摆脱在hello world内容之前插入的巨大空间。请帮助。
<!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>
您只需要指定2条规则：
padding-bottom:0px班级上的[.gallery-containermargin-top:0px元素上的[H1（具有世界您好内容的元素）]