我不知道为什么我的标题和描述之间有这么大的差距

Question

我对CSS网格和一般tbh中的编码很陌生。我正试图为我的网站制作一个商店页面，我不明白为什么我的标题和我在div中的描述之间有这么大的差距；标题容器"；。

提前感谢您的帮助，

.container {
display: grid;
grid-template-rows: minmax(1000px, auto);
grid-template-columns: 1fr 4fr;
background-color: red;
}
.sidebar {
background-color: blue;
}
.product-side {
background-color: yellow;
}
.title-container {
display: grid;
grid-template-rows: minmax(200px, auto);
width: 95%;
margin: 0px auto;
background-color: #000000;
}
.title-container h1,
p {
color: #ffffff;
}

<div class="container">
<div class="sidebar"></div>
<div class="product-side">
<div class="title-container">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>

Answer 1

grid-template-rows: minmax(200px, auto);将标题容器的高度设置为200px。

删除或调整此属性。

以下示例：

.container {
display: grid;
grid-template-rows: minmax(1000px, auto);
grid-template-columns: 1fr 4fr;
background-color: red;
}
.sidebar {
background-color: blue;
}
.product-side {
background-color: yellow;
}
.title-container {
display: grid;
grid-template-rows: minmax(60px, auto);
width: 95%;
margin: 0px auto;
background-color: #000000;
}
.title-container h1,
p {
color: #ffffff;
}

<div class="container">
<div class="sidebar"></div>
<div class="product-side">
<div class="title-container">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>